2

下面是我创建的用于绘制按钮的 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
4

4 回答 4

6

您没有使用该border-radius属性的无前缀版本，只是-moz-border-radius和-webkit-border-radius. （顺便说一下，这两个引擎长期以来一直支持border-radius没有供应商前缀的属性——Chrome 从 5.0 开始，Firefox 从 4.0 开始——所以除非这是出于某种原因，否则不要费心使用它们。）

于 2013-02-28T15:41:36.767 回答
0

尝试添加

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

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

于 2013-02-28T15:44:02.287 回答
0

-moz-border-radius作为别名从 Gecko 13.0 中删除，该别名于 2012 年 6 月 5border-radius日作为Firefox 13发布，因此任何更高版本的 Firefox 都不支持-moz前缀，border-radius这就是 Firefox 不应用该样式的原因。

-webkit-border-radius仍然支持作为别名，这就是在 Chrome 中应用该样式的原因。

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

于 2013-02-28T15:51:15.310 回答
-1

尝试添加以下代码：

border-radius:48px;      //W3C
于 2013-02-28T15:42:53.430 回答