IE 6 проблемы с изображением PNG в фоновом режиме

Question

У меня проблема с изображением 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');
}

Спасибо! Заранее.

Answer 1

IE6 не поддерживает прозрачность PNG напрямую, но вы можете взломать ее через фильтр CSS.Но, к счастью, нет необходимости делать это самостоятельно.Исправление, которое работает автоматически (и очень хорошо), доступно по адресу http://www.twinhelix.com/css/iepngfix/. Установка проста и динамически добавляет соответствующие команды фильтра DirectX для любых изображений PNG на вашей странице.

Единственный недостаток заключается в том, что, так как это исправление применяется ПОСЛЕ загрузки домена, будет непродолжительный период, когда непрозрачность PNG будет видна, поэтому перед тем, как все начнет выглядеть, как ожидалось, произойдет короткая вспышка уродства.

Answer 2

IE6 ненавидит pngs, это печальный факт ... но вы должны попробовать использовать условные комментарии вместо этого хакера с подчеркиванием ... отредактируйте ваш 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;
}

Затем в заголовок вашего 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.