Opera 10.6 是否正确支持字段集的边框半径?
我试图让边框半径属性在 Opera 10.6 中的字段集上正常工作,但它似乎无法正常工作。
这是 html:
<form method="post" action="character.php" class="form">
<fieldset>
<legend>Insert</legend>
<label for="txtCharacter">Character</label>
<input type="text" id="txtCharacter" name="txtCharacter" />
</fieldset>
</form>
这是我尝试使用的 css:
.form fieldset {
background-color:#355e3b;
margin:0px;
border:3px solid #635147;
/* Adds the rounded border effect. */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
上面的内容在 Firefox 和 Safari 中完美运行,为我提供了一个具有所需边框形状/大小/颜色和正确背景颜色的圆形字段集:
Safari http://img827.imageshack.us/img827/8411/safari1.png
Opera 给了我颜色正确,但边框是方形的:
Opera1 http://img37.imageshack.us/ img37/2051/opera1r.png
但是,如果我采用指定边框的行 (border:3pxsolid #635147;
),那么 Opera 会给出一个圆角字段集,就像它应该的那样:
这是怎么回事?为什么选择边框时 Opera 不显示边框半径?谢谢!
I am trying to get the border radius property to work properly on a fieldset in Opera 10.6, but it does not appear to be working correctly.
Here is the html:
<form method="post" action="character.php" class="form">
<fieldset>
<legend>Insert</legend>
<label for="txtCharacter">Character</label>
<input type="text" id="txtCharacter" name="txtCharacter" />
</fieldset>
</form>
Here is the css I am trying to use:
.form fieldset {
background-color:#355e3b;
margin:0px;
border:3px solid #635147;
/* Adds the rounded border effect. */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
The above works perfectly in Firefox and Safari, giving a me a rounded fieldset with desired border shape/size/color and the correct background color:
Safari http://img827.imageshack.us/img827/8411/safari1.png
Opera gives me the correct colors, but the borders are square:
Opera1 http://img37.imageshack.us/img37/2051/opera1r.png
However, if I take the line specifying the border (border:3px solid #635147;
) then Opera gives a rounded fieldset just as it is supposed to:
What's going on here? Why won't Opera display the border-radius when a border is selected? Thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
这可能是他们的渲染引擎中的一个错误。
That's probably a bug in their rendering engine.
圆角存在一些众所周知的问题关于 Opera 中的输入元素,可能是人们发现的适用于您的字段集的解决方法之一。
There are a few well know issues with rounded corners on input elements in Opera, possibly one of the workarounds people have discovered for that would work on your fieldset.
我正在使用 Opera 11.51,但该错误仍然存在。
css:
Chrome、Safari、Firefox:适用于
IE 6 至 8,Opera 11.51:不适用于(当然,直到 IE9 才支持)。
I'm using Opera 11.51, and the bug is still there.
css:
Chrome, Safari, Firefox: works
IE 6 thru 8, Opera 11.51: doesn't work (no support until IE9, of course).