VPF::Не срабатывает filter:... Gradient в IE - Форум программистов

1234ru

Дата 7.7.2010, 15:08 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 39
Регистрация: 26.8.2007

Репутация: нет
Всего: -1

Не работает из-за 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>

Это сообщение отредактировал(а) 1234ru - 8.7.2010, 16:00

SelenIT

Дата 8.7.2010, 14:18 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

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

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

)

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

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

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

1234ru

Дата 8.7.2010, 16:03 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 39
Регистрация: 26.8.2007

Репутация: нет
Всего: -1

Цитата

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

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

Цитата

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

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

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

m0ro

Дата 8.7.2010, 17:59 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 800
Регистрация: 19.5.2007

Репутация: нет
Всего: 68

Поправил чуток. У меня работает. 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>

Это сообщение отредактировал(а) m0ro - 8.7.2010, 18:00

SelenIT

Дата 8.7.2010, 20:01 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

У меня заработало, если в записи для 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

. И переключаются они по очень хитрому алгоритму, в зависимости не только от доктайпа, но и от нескольких настроек. И в режимах "как IE5.5" и "как IE7" работает запись filter, а не -ms-filter...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

1234ru

Дата 9.7.2010, 16:17 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 39
Регистрация: 26.8.2007

Репутация: нет
Всего: -1

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

Цитата

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

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

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

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

Это сообщение отредактировал(а) 1234ru - 9.7.2010, 16:20

SelenIT

Дата 9.7.2010, 21:59 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Цитата(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...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »