Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Не срабатывает filter:... Gradient в IE

Автор: 1234ru 7.7.2010, 15:08

Не работает из-за XHTML :(
(если убрать объявление DOCTYPE - работает)

Как быть в такой ситуации?

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <style type="text/css">
        .gradient {
            zoom:1;
            
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(
            GradientType=0,
            startColorstr='#81a8cb',
            endColorstr='#4477a1')"; /* IE8 */
            
            filter: progid:DXImageTransform.Microsoft.gradient(
            GradientType=0,
            startColorstr='#81a8cb',
            endColorstr='#4477a1'); /* IE6 и IE7 */
        }
    </style>
    
    <a class="gradient">фыва</a>
    <button class="gradient">фыва</button>
    
</body>
</html>

Автор: SelenIT 8.7.2010, 14:18

display: inline-block не помогает?

Цитата(1234ru @ 7.7.2010, 15:08

)

Не работает из-за XHTML

"X" ни при чем. C <!doctype html> будет то же самое. К тому же что это за "X", где <html> открыт дважды, а <style> лишен обязательного атрибута? ;)

Автор: 1234ru 8.7.2010, 16:03

Цитата

"X" ни при чем. C <!doctype html> будет то же самое.

Да, я уже тоже это выяснил.

Цитата

К тому же что это за "X", где <html> открыт дважды, а <style> лишен обязательного атрибута?

Эти недочеты на ситуацию не влияют. Исправил (хотя, разумеется, не помогло).

Так что, получается, DOCTYPE не поддерживает ms-filter ?

Автор: m0ro 8.7.2010, 17:59

Поправил чуток. У меня работает. IE8, Windows 7. Только выполнение скриптов надо разрешить в браузере.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    .gradient {
        zoom:1;
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(
            GradientType=0, startColorstr='#81a8cb',endColorstr='#4477a1')"; /* IE8 */
        filter: progid:DXImageTransform.Microsoft.gradient(
            GradientType=0,startColorstr='#81a8cb',endColorstr='#4477a1'); /* IE6 и IE7 */
    }
</style>
</head>
<body>
    <a class="gradient">фыва</a>
    <button class="gradient">фыва</button>
</body>
</html>

Автор: SelenIT 8.7.2010, 20:01

У меня заработало, если в записи для IE8 убрать внутренние кавычки и переводы строк:

Код


-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#81a8cb, endColorstr=#4477a1)"; /* IE8 */

И display:inline-block необходим, чтобы работало для ссылки (у кнопки он такой по умолчанию). HasLayout'а, который включается zoom-ом, у IE8 ведь нет...

С IE8 вообще всё сложно. У него не два-три режима отображения страниц, как у остальных браузеров, а целых четыре - "как IE5.5", "как IE7", "почти по стандарту" и "почти совсем по стандарту" smile

. И переключаются они по http://habrahabr.ru/blogs/css/86309/, в зависимости не только от доктайпа, но и от нескольких настроек. И в режимах "как IE5.5" и "как IE7" работает запись filter, а не -ms-filter...

Автор: 1234ru 9.7.2010, 16:17

В общем, выяснили, что если ms-filter убрать или хотя бы поставить его в конец - то работает.

Цитата

display: inline-block не помогает?

Помогает, но это все-таки не очень безопасно.

Хотелось zoom:1, т.к. он более безобиден.

Но он конфликтует с DOCTYPE: при объявленном DOCTYPE не срабатывает, поэтому у инлайновых элементов не включается hasLayout и градиент не появляется.

Автор: SelenIT 9.7.2010, 21:59

Цитата(1234ru @ 9.7.2010, 16:17

)

Помогает, но это все-таки не очень безопасно.

Хотелось zoom:1, т.к. он более безобиден.

Это разные вещи. По-хорошему, нужно и то и другое - inline-block для IE8 (в "родном" режиме), hasLayout (для инлайновых элементов ведет себя по сути так же) для IE7 и ниже.

Цитата(1234ru @ 9.7.2010, 16:17

)

при объявленном DOCTYPE не срабатывает,

В "родном" режиме IE8 (не quirks mode - который без доктайпа, и не "Emulate IE7") hasLayout-а не бывает вообще. Там, к счастью, можно использовать свойства CSS по назначению, и для применения фильтра к ссылке как к блоку ей как раз нужен inline-block...