html - 按钮在所有浏览器中呈现的效果不一样

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 - 所以除非这是有原因的，否则不要费心使用它们。)