按钮样式CSS - 与I.E的问题

Question

我有按钮的样式。在 Firefox 和 Chrome 上工作完美，但 Internet Explorer（所有版本）

JsFiddle DEMO： 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;
}

Answer 1

This here works for me in IE10

This works in IE8+, (Not tested on IE8 down) - uses background colour rather than gradient

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

Button screenshot http://puu.sh/4ucGX.png

这在IE8中（IE8中不支持边框半径 - ）

IE9和down并没有显示任何内容，因为你正在使用渐变。您可以（通过添加background:#006666来修复它，因为您不需要从一种颜色到相同颜色的渐变，两者之间没有区别。

Answer 2

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

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

中不支持的过滤器