Question

我试图让border radius属性在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:3px solid #635147;）的行，那么Opera会提供一个舍入的字段集，就像它应该的那样：

Opera2 http://img651.imageshack.us/img651/4651/opera2j.png

这里发生了什么？选择边框时，为什么Opera不会显示边框半径？谢谢！

Answer 1

这可能是他们渲染引擎中的一个错误。

Answer 2

rounded corners on input elements in Opera存在一些众所周知的问题，可能是人们发现的解决方法之一，可能会对您的字段集产生影响。

Answer 3

我正在使用Opera 11.51，而且bug仍然存在。

的CSS：

fieldset {
    moz-border-radius:1.5em;
    border-radius:1.5em;
}

Chrome，Safari，Firefox：正常工作

IE 6至8，Opera 11.51：不起作用（当然，直到IE9才支持）。

Opera 10.6是否正确支持fieldsets的border-radius？

3 个答案: