0

我有一个按钮的这种样式。在Firefox和Chrome上完美运行,但不适用于Internet Explorer(所有版本)

JsFiddle 演示:http: //jsfiddle.net/Mhded/1/

这是我的代码:

HTML:

<span class="button_style">Comment</span>

CSS:

.button_style { 
    background:-moz-linear-gradient(top,#006666 0%,#006666 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#006666),color-stop(100%,#006666));
    background:-webkit-linear-gradient(top,#006666 0%,#006666 100%);
    background:-o-linear-gradient(top,#006666 0%,#006666 100%);
    background:-ms-linear-gradient(top,#006666 0%,#006666 100%);
    background:linear-gradient(top,#006666 0%,#006666 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006666',endColorstr='#006666',GradientType=0);
    border: 1px solid #006666;
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    font-family: 'Helvetica',sans-serif;
    font-size: 14px;
    padding: 6px;
    vertical-align: middle;
    width: 70px;
    cursor:pointer;
}
4

2 回答 2

3

这在 IE10 中对我有用

这适用于 IE8+,(未在 IE8 上测试) - 使用背景颜色而不是渐变

我添加了border:none;它并停止在它周围显示边框,在 IE10 中看起来像这样:

按钮截图​​ http://puu.sh/4ucGX.png

这在 IE8 中(IE8 不支持边框半径)

IE8 按钮

IE9 及以下不显示任何内容,因为您使用的是渐变。您可以(有点)通过添加来修复它,background:#006666因为您不需要从一种颜色到相同颜色的渐变,两者之间没有区别。

于 2013-09-18T07:55:21.603 回答
0

这是因为 IE 不支持您的某些 CSS属性。你需要研究每一个并找出如何为 IE 做这件事。

过滤器是 IE 10 不支持的过滤器http://msdn.microsoft.com/en-us/library/ie/hh801215(v=vs.85).aspx

于 2013-09-18T07:52:38.353 回答