Поскольку у меня есть некоторые навыки создания веб-страниц, я давно слышал, что полупрозрачные файлы PNG будут иметь проблемы с отображением в IE6, но, поскольку у меня никогда не было собственного веб-сайта, я никогда с этим не сталкивался.
Я начал создавать свой собственный сайт в начале этого года. Для создания логотипа веб-сайта я использовал изображение в формате PNG с прозрачной частью. Я думал, что оно достаточно старое и нет необходимости рассматривать IE6. Однажды, когда я вернулся с работы и открыл серверную часть Google Analytics, я обнаружил, что посещения IE6 на самом деле составляют 40% от общего числа посещений. Я был шокирован и быстро загрузил зеленую версию IE6 из Интернета, чтобы протестировать свой веб-сайт. Как и ожидалось, ЛОГОТИП оказался полностью непрозрачным.
Поэтому я всю ночь искал в Интернете решения. Вообще говоря, онлайн-методы относительно сложны, включая фильтры CSS, js, замену gif и т. д. Но мне всегда казалось, что это недостаточно красиво. Наконец, после ночи поисков, я нашел метод, который требовал всего 2 предложения js-кода для плавного решения проблемы. Давайте поделимся этим с вами дальше
Сначала загрузите iepng.js с моего сайта.
http: //www.*** .com/templates/default/js/iepng.js
Если идентификатор элемента вашего веб-сайта, который использует полупрозрачный png в качестве фона, — это логотип, добавьте следующее между <head></head>:
<!-- для исправления PNG в ie6 --> <script type="text/javascript" src="templates/js/iepng.js"></script> <script type=text/javascript> EvPNG.fix('#logo');</script> |
Наконец, позвольте мне объяснить: если вы используете прозрачный PNG в качестве фона div id foo, то это должно быть записано как:
EvPNG.fix('#foo'); |
Если вы используете прозрачный PNG в качестве фона панели класса div, то это должно быть записано как:
EvPNG.fix('.bar"); |
Синтаксис такой же, как и у CSS, надеюсь, я продолжу обмениваться с вами навыками создания веб-сайтов.
Эту статью изначально написал Ван Цзай, веб-мастер Tianniu.com (www.hers99.com). При перепечатке указывайте источник.