Html 按钮在所有Broswer中呈现不相同

下面是我为绘制按钮而创建的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
    }

---

您没有使用未固定版本的

border radius

属性，只使用

-moz border radius

和

-webkit border radius

。（顺便说一句，这两个引擎长期以来都支持没有供应商前缀的

border radius

属性，因此除非出于某种原因，否则不要麻烦使用它们。）

尝试添加以下代码：

border-radius:48px;      //W3C

尝试添加

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

对于较旧的IE版本，您可能想尝试一下PIE，Gecko 13.0中删除了作为2012-06-05发布的

边界半径

的别名，因此任何较新版本的Firefox都不支持

-moz

前缀作为

边界半径

，这就是Firefox不应用该样式的原因

-webkit border radius

仍然作为别名受支持，这就是为什么在Chrome中应用此样式的原因

---

正如其他人所指出的，添加不固定的

边框半径将纠正Firefox缺少的样式。
-ms border radius
从未存在过。希望它永远不会存在。
-o-border-radius
也从未存在过。@user2108195:在Firefox和IE中？每个版本的版本是什么？IE是否处于兼容模式？它在firefox上可以正常工作，但在IE上仍然不能正常工作，并且版本为9@user2108195：按F12。IE是否处于兼容模式？（开发者工具窗口中的顶部栏）添加：边框半径：48px；了解有关CSS3的更多信息
边界半径
-moz-border-radius:48px;
-webkit-border-radius:48px;
border-radius:48px;