IE 6 выдает изображение png в фоновом режиме
У меня проблема с png-изображением в IE6 и я пытался искать везде, но безуспешно. Я использую этот код CSS для отображения PNG изображения. Есть ли проблемы. Пожалуйста, дайте мне сейчас.
.bottom-box {
width: 210px;
float: left;
margin:5px;
position:relative;
padding: 5px;
text-align:left;
height: 150px;
min-height: 150px;
background-image: url(/images/trans-box.png);
color: #FFF;
line-height: 20px;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/trans-box.png', sizingMethod='scale');
}
Спасибо! Заранее.
2 ответа
IE6 ненавидит png, это грустный факт... но вы должны попробовать использовать условные комментарии вместо этого хака с подчеркиванием... отредактируйте свой CSS следующим образом:
.bottom-box {
width: 210px;
float: left;
margin:5px;
position:relative;
padding: 5px;
text-align:left;
height: 150px;
min-height: 150px;
background-image: url(/images/trans-box.png);
color: #FFF;
line-height: 20px;
}
Затем в HEAD of добавьте свой HTML:
<!--[if lte IE 6]>
<style>
.bottom-box{
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/trans-box.png,
sizingMethod='scale');
}
</style>
<![endif]-->
Или вы можете просто использовать GIF или что-то еще только для ie6, используя хаки / условные комментарии.
Кстати, свойство filter: относится к IE.
вы также можете попробовать хак со звездочкой, вместо условного, отредактируйте свой CSS, как указано выше, но добавьте следующее правило:
* html .bottom-box{
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/trans-box.png,
sizingMethod='scale');
}
поскольку это технически допустимый CSS, он может работать лучше.
Также, вероятно, полезно знать, что IE6 и это исправление PNG не будут работать с background-position или background-repeat. он не будет размещать PNG в качестве фона, поэтому я снова предлагаю использовать gif или что-то еще для IE6.
IE6 не поддерживает прозрачность PNG напрямую, но вы можете настроить ее через фильтр CSS. Но, к счастью, нет необходимости делать это самостоятельно. Исправление, которое работает автоматически (и очень хорошо), доступно по адресу http://www.twinhelix.com/css/iepngfix/. Установка проста и динамически добавит соответствующие команды фильтра DirectX к любым изображениям PNG на вашей странице.
Единственным недостатком является то, что, поскольку это исправление применяется ПОСЛЕ загрузки dom, будет короткий период, когда непрозрачность PNG будет видна, поэтому будет краткая вспышка безобразия, прежде чем все начнет выглядеть так, как ожидалось.