У меня этот стиль для кнопки. Работает отлично на 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;
}
Это работает в IE8+, (не тестируется на IE8 вниз) - использует цвет фона, а не градиент
Я добавил border:none;
и он остановил отображение границы вокруг него и выглядит так в IE10:
Снимок кнопки http://puu.sh/4ucGX.png
и это в IE8 (радиус границы не поддерживается в IE8-)
IE9 и down ничего не показывают, поскольку вы используете градиенты. Вы можете (вроде) исправить это, просто добавив background:#006666
так как вам не нужен градиент от одного цвета к одному и тому же цвету без разницы между ними.
Это потому, что IE не поддерживает некоторые ваши свойства CSS. Вам нужно исследовать каждую из них и выяснить, как это сделать для IE.
Фильтр - это тот, который не поддерживается в IE 10 http://msdn.microsoft.com/en-us/library/ie/hh801215(v=vs.85).aspx
filter
является свойством.