Question

下面是我创建的用于绘制按钮的CSS代码。当我在Chrome中查看此按钮时，该按钮看起来应该是圆形的，但在Firefox和IE上，它是方形的。为什么会出现这种情况？

<!-- language: lang-css -->

    .button {
        width:90px;
        float:right;
        background:#FEDA71;
        background:-moz-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FEDA71),color-stop(100%,#FEBB49));
        background:-webkit-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
        background:-o-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
        background:-ms-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
        background:linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
        padding:8px 18px;
        color:#623F1D;
        font-family:'Helvetica Neue',sans-serif;
        font-size:16px;
        -moz-border-radius:48px;
        -webkit-border-radius:48px;
        border:1px solid #623F1D
    }

下面的代码使Firefox开始工作，但IE仍无法工作

Code after change and still doensnt work

background:#FEDA71;
    background:-moz-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FEDA71),color-stop(100%,#FEBB49));
    background:-webkit-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
    background:-o-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
    background:-ms-linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
    background:linear-gradient(top,#FEDA71 0%,#FEBB49 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEDA71',endColorstr='#FEBB49',GradientType=0);
    padding:8px 18px;
    color:#623F1D;
    font-family:'Helvetica Neue',sans-serif;
    font-size:16px;
    border-radius:48px;
    -moz-border-radius:48px;
    -webkit-border-radius:48px;
    border:1px solid #623F1D

Answer 1

您没有使用border-radius属性的无前缀版本，只有-moz-border-radius和-webkit-border-radius。（顺便说一句，两个引擎都长期支持border-radius属性而没有供应商前缀 - Chrome since 5.0 and Firefox since 4.0 - 所以除非这是有原因的，否则不要打扰使用它们。）

Answer 2

尝试添加

-moz-border-radius:48px;
-webkit-border-radius:48px;
border-radius:48px;

对于较旧的IE版本，您可能需要尝试PIE http://css3pie.com/

Answer 3

-moz-border-radius已从Gecko 13.0中删除，作为border-radius的别名，已在2012-06-05发布为Firefox 13，因此任何更高版本的Firefox都不支持{{3}} 1}} -moz的前缀，这就是Firefox不应用该样式的原因。

仍然支持

border-radius作为别名，这就是在Chrome中应用样式的原因。

正如其他人所指出的那样，添加未加前缀的-webkit-border-radius将纠正Firefox的缺失样式。

Answer 4

尝试添加以下代码：

border-radius:48px;      //W3C

按钮在所有浏览器中都不会呈现相同

4 个答案: