字段集上的圆角

Question

我注意到"fieldset"标签在IE上呈现圆角边框(它在其他浏览器上呈现平方).

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

但是,如果我在字段集上设置CSS样式,圆角消失!

谁知道为什么？如何保持圆角但有另一种边框颜色？

[编辑]:抱歉混淆,我不问如何在Firefox /其他浏览器上有圆角,我想知道如何在IE上保持圆角并有另一种边框颜色(边框颜色:红色;在fieldset将轮数更改为方块...).

Answer 1

此站点修复了有关fieldset圆角和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-shadow/

Answer 2

没有为什么这样,浏览器表现不同并不是秘密.

你有没有探索过-moz-border-radius属性？

我觉得有点像

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

在FireFox/Mozilla中工作,但是我尝试了很长时间了:D

Answer 3

IE中的边框仅在1)您在Performance |下启用了"在按钮上的窗口上使用视觉样式"时为圆形 视觉效果选项卡.说实话:如果启用了"XP主题",它将被舍入,当你拥有经典的Win2000外观时,它将不会被舍入.

第二个要求2)是字段集的"无边框相关CSS".无论何时指定边框颜色,边框样式或边框宽度,"圆度"都消失了,没有解决方法.输入(按钮和字段),文本框和选择标记也是如此.每当IE发现没有CSS主题供控件呈现时,它会将"默认Windows主题"应用于控件.

Answer 4

默认情况下,某些项目(按钮,输入框)使用系统视觉样式 - 在默认的Windows XP/Vista主题中,字段集具有圆角.(例如,查看"显示属性".)

<input />例如,如果您将任何样式指定给它,它将失去其悬停效果,渐变和其他内容.