字段集上的圆角

Question

我注意到“fieldset”标签在 IE 上呈现圆角边框（它在其他浏览器上呈现方形）。

<fieldset>
         <legend>My legend</legend>
</fieldset>

但是如果我在字段集上设置 CSS 样式，圆角就会消失！

有人知道为什么吗？ 如何保留圆角但使用另一种边框颜色？

[编辑]：抱歉造成混乱，我不问如何在 Firefox/其他浏览器上有圆角，我想知道如何在 IE 上保持圆角并具有另一种边框颜色（ border-color:red; 在字段集上将圆形更改为方形...）。

Answer 1

该站点修复了有关字段集圆角和 IE10 的问题。 IE 中仍然存在问题（悲伤的表情）。 你必须让它在 100% 的时间内浮动才能工作。

fieldset {
  margin: 20px;
  padding: 0 10px 10px;
  border: 1px solid #666;
  border-radius: 8px;
  box-shadow: 0 0 10px #666;
  padding-top: 10px;
}
legend {
  padding: 2px 4px;
  background: #fff;
  /* For better legibility against the box-shadow */
}
fieldset > legend {
  float: left;
  margin-top: -20px;
}
fieldset > legend + * {
  clear: both;
}

<fieldset>
  <legend>Legend</legend>
</fieldset>

http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-阴影/

Answer 2

没有什么原因，浏览器的行为不同已不是什么秘密。

您探索过 -moz-border-radius 属性吗？

我认为类似的东西

fieldset {   
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -webkit-border-radius: 5px; //edit :D
}  

可以在 FireFox/Mozilla 中使用，但自从我尝试以来已经很长时间了：D

Answer 3

某些项目（按钮、输入框）默认使用系统视觉样式 - 在默认的 Windows XP/Vista 主题中，字段集具有圆角。 （例如，查看“显示属性”。）

例如，如果您将任何样式分配给 ，它也会失去其悬停效果、渐变效果和其他内容。

Answer 4

IE 中的边框仅在以下情况下呈圆形： 1) 您在性能 | 下启用了“在按钮上的窗口上使用视觉样式”。 视觉效果选项卡。 说白了：如果你启用了“XP主题”，它就会四舍五入，当你有经典的Win2000外观时，它就不会四舍五入。

第二个要求 2) 是字段集“无边框相关 CSS”。 每当您分配边框颜色、边框样式或边框宽度时，“圆度”就会消失，没有解决方法。 对于输入（按钮和字段）、文本框和选择标签也是如此。 每当 IE 发现控件没有 CSS 主题来渲染时，它就会将“默认 Windows 主题”应用于控件。

Answer 5

您可以使用 CSS 3 border-radius 属性，该属性适用于 Firefox 和 Safari：

fieldset {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}

Answer 6

http://www. webteacher.ws/2010/02/27/style-a-fieldset-with-rounded-corners-using-css/

Answer 7

fieldset {   
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -webkit-border-radius: 5px; //edit :D
}