问题
I noticed that the "fieldset" tag renders a rounded corner border on IE (it renders squared on the other browsers).
<fieldset>
<legend>My legend</legend>
</fieldset>
BUT if i set a CSS style on the fieldset, the rounded corners disappear!!
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 IE and have another border color (border-color:red; on the fieldset changes the rounds to squares...).
回答1:
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.)
If you assign any style to an <input />
, for example, it will lose its hover effects, gradients and other things too.
回答2:
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.
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/
回答3:
There is no WHY as such, it is no secret that the browsers behave differently.
Have you explored the -moz-border-radius attribute?
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
回答4:
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.
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.
回答5:
You could use CSS 3 border-radius property, which will work on Firefox and Safari:
fieldset {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
回答6:
http://www.webteacher.ws/2010/02/27/style-a-fieldset-with-rounded-corners-using-css/
回答7:
fieldset {
-moz-border-radius:5px;
border-radius: 5px;
-webkit-border-radius: 5px; //edit :D
}
来源:https://stackoverflow.com/questions/940191/rounded-corners-on-a-fieldset