CSS для стилей кнопок - проблема с IE

0

У меня этот стиль для кнопки. Работает отлично на 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;
}
Теги:
internet-explorer

2 ответа

3
Лучший ответ

Это работает для меня в IE10

Это работает в IE8+, (не тестируется на IE8 вниз) - использует цвет фона, а не градиент

Я добавил border:none; и он остановил отображение границы вокруг него и выглядит так в IE10:

Снимок кнопки http://puu.sh/4ucGX.png

и это в IE8 (радиус границы не поддерживается в IE8-)

Изображение 174551

IE9 и down ничего не показывают, поскольку вы используете градиенты. Вы можете (вроде) исправить это, просто добавив background:#006666 так как вам не нужен градиент от одного цвета к одному и тому же цвету без разницы между ними.

  • 3
    Извините за повторные правки, но ответ выглядит лучше, если вы вставите изображение
  • 0
    Спасибо @ Bojangles, я не знал, как это сделать!
Показать ещё 3 комментария
0

Это потому, что IE не поддерживает некоторые ваши свойства CSS. Вам нужно исследовать каждую из них и выяснить, как это сделать для IE.

Фильтр - это тот, который не поддерживается в IE 10 http://msdn.microsoft.com/en-us/library/ie/hh801215(v=vs.85).aspx

  • 1
    Попробуем использовать правильные термины: CSS не имеет атрибутов, filter является свойством.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню