26

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

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

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

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

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

4

7 回答 7

20

该站点修复了有关 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/

于 2013-07-01T14:12:20.053 回答
14

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

您是否探索过-moz-border-radius属性？

我想像

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

在 FireFox/Mozilla 中工作，但我已经很久没有尝试了：D

于 2009-06-02T15:30:40.053 回答
9

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

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

于 2009-06-02T16:02:57.013 回答
8

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

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

于 2009-08-27T11:25:25.327 回答
0

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

于 2012-10-03T12:39:08.070 回答
0

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

fieldset {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}
于 2009-06-02T15:32:27.427 回答
-1 
fieldset {   
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -webkit-border-radius: 5px; //edit :D
}
于 2010-12-17T14:25:46.627 回答