Обработка CSS градиента в Internet Explorer

Question

У меня есть созданный стиль, который даст все «кнопки» градиентного фона. Не все кнопки на самом деле являются кнопками, некоторые ссылки имеют стиль, похожий на кнопку.

<input type="submit" value="submit" class="gradient" /><br />
<input type="button" value="button" class="gradient" /><br />
<a href="" class="gradient">Link</a>

К ним я применил следующие стили:

background-image: -moz-linear-gradient(top, #20799d, #5cb9df); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #20799d),color-stop(1, #5cb9df)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#20799d, #5cb9df); /* Chrome 10+, Saf6 */
background-image: linear-gradient(top, #20799d, #5cb9df); 
font-family: Arial, Helvetica, sans-serif;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#20799d', EndColorStr='#5cb9df'); /* IE6–IE9 */ 

Проблема найдена здесь. IE 7-9 будет применять градиент к элементам <input>, но НЕ к элементу <a>. Все остальные браузеры работают. Есть ли исправление, чтобы IE давал <a> градиентов тегов?

Вы можете проверить и увидеть результаты здесь, только IE приводит к тому, что последний не имеет градиента. jsfiddle.net

Answer 1

Настройка display:inline-block исправил градиент для меня в IE 6, 7 и 8.

http://jsfiddle.net/wSuJj/3/

Я не уверен, почему, это может быть связано с hasLayoutНадеюсь, кто-то может прийти и объяснить.

Существует еще некоторое несоответствие с границами в IE6 и 7, которое, похоже, не связано.

Answer 2

Чтобы применить фильтры к элементу, он должен hasLayout.Лично я пользуюсь zoom:1.