按钮在所有broswers中都不会呈现相同的效果(Button not rendering the same in all broswers)

按钮在所有broswers中都不会呈现相同的效果(Button not rendering the same in all broswers)

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

Below is the CSS code which I have created to draw a button. When I view this in Chrome, the button looks circular as it should, but on Firefox and IE, it’s square. Why this would be the case?

<!-- 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 }

The code below has made Firefox start working but IE Still Doesnt Work

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

最满意答案

您没有使用border-radius属性的前缀版本，只是-moz-border-radius和-webkit-border-radius 。 （顺便提一下，两个引擎都支持border-radius属性而没有供应商前缀 - Chrome自5.0以及Firefox自4.0以来 - 所以除非这是有原因的，不要打扰使用它们。）

You aren’t using the unprefixed version of the border-radius property, just -moz-border-radius and -webkit-border-radius. (Both engines have long supported the border-radius property without a vendor prefix, by the way — Chrome since 5.0 and Firefox since 4.0 — so unless this is for a reason, don’t bother using those.)

按钮在所有broswers中都不会呈现相同的效果(Button not rendering the same in all broswers)

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

Below is the CSS code which I have created to draw a button. When I view this in Chrome, the button looks circular as it should, but on Firefox and IE, it’s square. Why this would be the case?

<!-- 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 }

The code below has made Firefox start working but IE Still Doesnt Work

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

最满意答案

您没有使用border-radius属性的前缀版本，只是-moz-border-radius和-webkit-border-radius 。 （顺便提一下，两个引擎都支持border-radius属性而没有供应商前缀 - Chrome自5.0以及Firefox自4.0以来 - 所以除非这是有原因的，不要打扰使用它们。）

You aren’t using the unprefixed version of the border-radius property, just -moz-border-radius and -webkit-border-radius. (Both engines have long supported the border-radius property without a vendor prefix, by the way — Chrome since 5.0 and Firefox since 4.0 — so unless this is for a reason, don’t bother using those.)