IE 9 и стиль кнопки

Question

У меня есть элемент button, где я применяю класс css, который добавляет цвет границы к различным сторонам кнопки.Это работало в предыдущих версиях IE, но не в IE 9

HTML:

<button class="hello-button">Hello, World</button>

CSS:
.hello-button {     
    border-width: 2px;
    border-style: solid;
    border-color: #eee #a9a9a9 #a9a9a9 #eee;
}

Это известная проблема и есть ли обходные пути, кроме стиля border: outset;Я пробовал различные комбинации, но кажется, что вы больше не можете стилизовать границы элемента кнопки.

Редактировать: форматирование

Answer 1

Если указать 3 границы, эти границы будут отображаться в IE9. После указания 4-й границы IE9 отказывается отображать любую из границ

Работает:

.hello-button {     
    border-top: 2px solid #eee;
    border-right: 2px solid #a9a9a9;    
    border-bottom: 2px solid #a9a9a9;   
}

Не работает:

.hello-button {     
    border-top: 2px solid #eee;
    border-right: 2px solid #a9a9a9;    
    border-bottom: 2px solid #a9a9a9;   
    border-left: 2px solid #eee;
}

Если для этого поведения нет веской (или хотя бы специальной) причины, для меня это выглядит как ошибка ...

Answer 2

Это странно.Это на самом деле работает, если вы не указали стиль рамки.IE9 тогда даст вам сплошную границу, но другие браузеры будут делать разные вещи.

Но он возвращается к работе, если вы укажете border-radius (в дополнение к border-style).и побалуйте себя некоторыми современными стилями CSS:)

Конечно, это не идеально, если вы хотите идеально квадратную кнопку, но вы можете установить низкое значение для радиуса (хотя дважды проверьте, как он выглядит).

Answer 3

Похоже, ошибка.Поскольку я управлял сервером, я решил эту проблему, установив заголовок ответа X-UA-совместимый в IE = EmulateIE8

http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx#Servers

Answer 4

Это похоже на ошибку. Можете ли вы определить режим совместимости документов для более старой версии IE?

http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx