Проблема со значками стрелок палитры Гобеленов в IE8 - PullRequest
Новая
       34

Проблема со значками стрелок палитры Гобеленов в IE8

1 голос
/ 14 января 2010

Я использую Tapestry для создания страниц для веб-приложения и использую компонент палитры для добавления / удаления элементов в / из группы.

Страница выглядит великолепно в Firefox (Tapestry, похоже, смещен в сторону Firefox), но все мои клиенты будут использовать Internet Explorer (любые версии от 6, 7 и 8), а в IE8 отключенные кнопки со стрелками выглядят ужасно. В Firefox они блеклые, с настройкой непрозрачности 25%, но это не работает в IE8, и вместо этого вы получаете блеклое изображение с уродливой черной рамкой вокруг изображения.

В таблице стилей tapestry-core (default.css) у вас есть следующее для отключенной кнопки со стрелкой. 

DIV.t-palette-controls BUTTON[disabled] IMG {
    filter: alpha(opacity = 25);
    -moz-opacity: .25;
}

Они явно устарели, так как -moz-opacity больше не поддерживается Firefox (вместо этого используйте opacity: 25). Проблема с фильтром: "альфа (непрозрачность = 25);". Если я уберу это, стрелки будут хорошо выглядеть в IE8, но они не исчезнут.

Я получил магическую инструкцию: 

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=25)";

с различных веб-сайтов, но установка этого также не работает - значки со стрелками снова выглядят ужасно.

Сам значок (распространяемый вместе с Tapestry) выглядит просто как обычный PNG, но я не специалист по форматам изображений, так что, может быть, там есть проблема?

Кто-нибудь еще имел эту проблему?

1 Ответ

0 голосов
/ 28 марта 2012

Я не совсем уверен, но может быть, что -ms-фильтр должен быть в правильном порядке, а также иметь другие свойства (например, хак hasLayout):

попробуйте это: 

DIV.t-palette-controls BUTTON[disabled] IMG {
    opacity:0.25; /* firefox, opera, safari, chrome */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=25)"; /* IE 8 */
    filter:alpha(opacity=25); /* IE 4, 5, 6 and 7 */
    zoom:1 /* so the element "hasLayout"
    /* or, to trigger "hasLayout" set a width or height */
}

Источник и объяснение

...