Если вы используете PNG8 с альфа-прозрачностью, изображения могут иметь прозрачность в IE6. Предостережения заключаются в том, что вы можете иметь только полностью прозрачные или непрозрачные изображения (все, что между ними будет просто визуализировано на 100% прозрачно), и что вы не можете использовать большую цветовую палитру или градиенты.
В зависимости от вашей конструкции возможен обходной путь, или вы можете использовать его вместе с опцией PNG8 выше. Если ваш фон прост, вы можете просто сопоставить что-либо вне углов с фоном. Используя эту технику, вы можете легко обойтись с одним изображением для ваших углов, если вы используете спрайты. Разметка будет выглядеть примерно так:
<div id="content">
<span class="lt"></span>
<span class="rt"></span>
<span class="lb"></span>
<span class="rb"></span>
</div>
И CSS:
#content {position:relative;}
/*These styles are generic and can be reused over multiple corner types*/
.lt, .rt, .lb, .rb{
background:url(../images/button_corners.png) no-repeat;
width:5px;
height:5px;
position:absolute;
}
.lt, .rt{top:0px;}
.rt, .rb{right:0px;}
.lt, .lb{left:0px;}
.rb, .lb{bottom:0px;}
/*The following would be used specifically for #content, but you could reuse a different part of the same image for a different container or button */
#content .lt{background-position:-200px 0px;}
#content .rt{background-position:-245px 0px;}
#content .lb{background-position:-200px -45px;}
#content .rb{background-position:-245px -45px;}
У этого подхода есть свои преимущества и недостатки:
Преимущества
Это кросс-браузер, он работает с жидкими и фиксированными макетами, и вы можете использовать его для элементов меню (hover будет работать в IE6 для ссылок) или контейнеров, для него не требуется JavaScript, и используя CSS-спрайт, вы можете сделать это с одним изображением, даже с несколькими типами углов.
Недостатки
Он не будет работать с каждым макетом, границы могут быть хитрыми или уродливыми, он добавляет несколько дополнительных элементов в разметку, и если вы используете его для элемента ссылки с эффектом наведения, IE6 имеет мерцание при наведении, которое может быть решена только с небольшим количеством JavaScript. Однако этот JavaScript - это всего одна строка, и его можно включить в условный комментарий:
<script type="text/javascript">document.execCommand("BackgroundImageCache",false,true);</script>