Получение прозрачного PNG для работы в IE 6 в теге img - PullRequest
Новая
       14

Получение прозрачного PNG для работы в IE 6 в теге img

1 голос
/ 22 июня 2009

У меня есть png с прозрачным фоном, который не работает в IE 6. Я обошел проблему, заменив несколько тегов img, использующих это изображение, на DIV, а в CSS я использую: 

#div {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png")}

Проблема, с которой я столкнулся, заключается в том, что я теряю атрибуты alt и title, что не делает сайт очень доступным. Если я использую вышеупомянутый CSS с тегом img, я вижу правильное изображение, но оно имеет большой крестик над ним, который IE показывает, когда не может отобразить изображение.

Есть ли какие-либо предложения о том, как заставить IE вести себя правильно, показывая прозрачность в теге IMG?

Ответы [ 6 ]

1 голос
/ 22 июня 2009

другой вариант - использовать htc для ie6 - решение см. Здесь:

http://www.twinhelix.com/css/iepngfix/

требуется только дополнительная строка, добавленная в ваш CSS-файл - извините, все же может потребоваться JavaScript - не слишком уверен.

1 голос
/ 22 июня 2009

вы можете использовать JavaScript, чтобы включить прозрачность в ie6. Есть много примеров, которые вы можете найти. вот ссылка на тот, который я использовал.

http://jquery.andreaseberhard.de/pngFix/

1 голос
/ 22 июня 2009

Один из способов, которыми вы можете продолжать использовать теги DIV, но при этом оставаться доступным, - поместить второй тег SPAN в элемент DIV и поместить в него значение для ALT, а затем стилизовать его так, чтобы оно не было за пределами страницы. например ... 

div.image {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png");
}

div.image span {
    position : absolute;
    top : -9999px;
}

Тогда HTML будет выглядеть так ... 

<div class="image" title="The title for the image" >
    <span>The ALT Text</span>
</div>

Тег заголовка будет по-прежнему работать в DIV, так что с этой частью все будет в порядке.

Я не думаю, что вы можете просто скрыть текст (как на дисплее: none;), потому что я думаю, что программы чтения с экрана будут уважать это правило (как в случае его не читать)

0 голосов
/ 22 июня 2009

IE6 поддерживает прозрачность PNG-8, но не PNG-24. Один из моих любимых инструментов для «исправления» IE6 - IE8.js .

0 голосов
/ 22 июня 2009

В то время как здесь кто-то дал реализацию JS для этого, это решение будет также выполняться для FF и других браузеров. Есть лучшие идеи, например, с использованием технологии MS:)

Один из них использует что-то под названием HTC (компонент гипертекста, если я не ошибаюсь). Это что-то вроде ... CSS для поведения. Это действительно XML-файл, который позволяет вам присоединять некоторые функции к селектору CSS. Опять же, технология только для MS.

Короче, посетите этот сайт: http://www.twinhelix.com/css/iepngfix/

Я использую это в рамках модуля drupal, и я очень счастлив. Если вам интересно, это модуль: http://drupal.org/project/pngbehave

Примечание: это не работает под IE тестером: http://www.my -debugbar.com / wiki / IETester / HomePage Я использую Windows 2000 с IE6 (работает под vmware, если вам нужно знать) для тестирования сайтов IE6.

0 голосов
/ 22 июня 2009

Я использовал небольшой инструмент javascript для решения этой проблемы пару месяцев назад. Он называется Unit PNG FIX и очень прост в использовании.

...