Question

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

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

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

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

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

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）您在“性能”下启用了“在按钮上的窗口上使用视觉样式”。视觉效果选项卡。说实话：如果启用了“XP主题”，它将被舍入，当你拥有经典的Win2000外观时，它将不会被舍入。

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

Answer 4

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

例如，如果您将任何样式分配给<input />，它将失去悬停效果，渐变和其他内容。

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
}

字段集上的圆角

7 个答案: