Если вы используете 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;}
Есть свои преимущества и недостатки такого подхода:
Преимущества
Это кросс- браузер, он работает с жидкостными и фиксированными макетами, и вы можете использовать его для пунктов меню (зависание будет работать в IE6 для ссылок) или в контейнерах , он не требует JavaScript, и с помощью спрайта CSS вы можете сделать это с одним изображением даже с несколькими типами углов.
Недостатки
Он не будет работать с любой планировкой, граница может быть сложной или некрасиво, это добавляет несколько дополнительных элементов в разметку, и если вы используете его для элемента связи с эффектом парения , IE6 имеет мерцание, которое может быть разрешено только с помощью JavaScript. Тем не менее, что JavaScript является только одна строкой и может быть включен в условном комментарии:
<script type="text/javascript">document.execCommand("BackgroundImageCache",false,true);</script>
Thx для ответа на ур, я знаю, что для решения IE6 нужны Js или изображения. Я хочу сделать круглый угол с изображениями, но хочу использовать меньшие изображения, разметку и семантический путь. –
Обновление - я только что нашел в MSDN, что граница CSS3 с границей была удалена из IE8. Следите за пакетом обновления или держитесь, пока IE9 для этой функции !!! – Fenton
@Sohnee - вы должны поместить свое обновление в свой ответ, где вы можете быть уверены, что его никто не упустит. – alex