Html 字段集上的圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/940191/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rounded corners on a fieldset
提问by Olivier Payen
I noticed that the "fieldset" tag renders a rounded corner border on IE (it renders squared on the other browsers).
我注意到“fieldset”标签在 IE 上呈现圆角边框（它在其他浏览器上呈现方形）。
<fieldset>
<legend>My legend</legend>
</fieldset>
BUT if i set a CSS style on the fieldset, the rounded corners disappear!!
但是如果我在字段集上设置 CSS 样式，圆角就会消失！！
Anybody know why? How to keep the rounded corners but with another border color?
有人知道为什么吗？如何保留圆角但使用另一种边框颜色？
[EDIT] : sorry for the confusion, i don't ask how to have rounder corners on firefox/other browsers, i want to know how to keep the rounder corners on IEand have another border color (border-color:red; on the fieldset changes the rounds to squares...).
[编辑]：抱歉造成混乱，我不问如何在 Firefox/其他浏览器上使用圆角，我想知道如何在 IE 上保留圆角并使用另一种边框颜色（边框颜色：红色；在字段集将圆形更改为正方形...）。
采纳答案by user1686
Some items (buttons, input boxes) are using the system visual styles by default - and in the default Windows XP/Vista themes, fieldsets have rounded corners. (Take a look at Display Properties, for example.)
某些项目（按钮、输入框）默认使用系统视觉样式 - 在默认的 Windows XP/Vista 主题中，字段集具有圆角。（例如，查看显示属性。）
If you assign any style to an <input />, for example, it will lose its hover effects, gradients and other things too.
<input />例如，如果您将任何样式分配给，它也会失去悬停效果、渐变和其他东西。
回答by Tim
This site has a fix for the issues concerning fieldset rounded corners and IE10. There are still issues in IE (sad face). You have to float it to work 100% of the time.
该站点修复了有关字段集圆角和 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/
http://www.456bereasttreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/
回答by inspite
There is no WHY as such, it is no secret that the browsers behave differently.
没有这样的原因，浏览器的行为不同已经不是什么秘密了。
Have you explored the -moz-border-radiusattribute?
您是否探索过-moz-border-radius属性？
I think something like
我认为类似
fieldset {
-moz-border-radius:5px;
border-radius: 5px;
-webkit-border-radius: 5px; //edit :D
}
works in FireFox/Mozilla, but it has been a long time since I tried :D
在 FireFox/Mozilla 中工作，但我已经很久没有尝试了 :D
回答by inspite
The borders in IE are only round when 1) You have the 'Use visual styles on windows on buttons' enabled under the Performance | Visual Effects tab. To put it blunt: if you have 'XP theming' enabled it will be rounded, when you have the classic Win2000 look, it will not be rounded.
IE 中的边框仅在以下情况下是圆形的： 1) 您在 Performance | 下启用了“在按钮上的窗口上使用视觉样式”。视觉效果选项卡。直言不讳：如果您启用了“XP 主题化”，它将被四舍五入，当您拥有经典的 Win2000 外观时，它将不会被四舍五入。
The second requirement 2) is 'no border-related CSS' for the fieldset. Whenever you assign a border-color, or border-style, or border-width, the 'roundness' is gone, there is no workaround for that. The same goes for input (both buttons and fields), textbox and select-tags. Whenever IE finds no CSS theming for the control to render it will apply the 'default Windows theme' to the control.
第二个要求 2) 是字段集的“无边框相关 CSS”。每当您指定边框颜色、边框样式或边框宽度时，“圆度”都消失了，没有解决方法。输入（按钮和字段）、文本框和选择标签也是如此。每当 IE 发现控件没有 CSS 主题时，它就会将“默认 Windows 主题”应用于控件。
回答by flig
回答by Absolut40
You could use CSS 3 border-radius property, which will work on Firefox and Safari:
您可以使用 CSS 3 border-radius 属性，该属性适用于 Firefox 和 Safari：
fieldset {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
回答by James
fieldset {
-moz-border-radius:5px;
border-radius: 5px;
-webkit-border-radius: 5px; //edit :D
}
