Эмуляция border-color: transparent в Internet Explorer 6

К сожалению, Internet Explorer 6 не поддерживает прозрачность для рамок. В CSS это выглядит как border-color: transparent.

Поэтому корректно работающий код в Opera, FireFox, Safary - отказывается работать в Internet Explorer 6. Зато у него есть мало кем используемые фильтры, работающие еще с версии 5.5.

Немного поэкспериментировав с ними, пришёл к выводу, что данную проблему можно решить достаточно просто.

Берем фильтр chroma(), задающий прозрачность выбранного цвета на изображении. Оборачиваем наш CSS-код условными комментариями или используем хаки.

Выставляем для блока hasLayout = true. Даём рамке цвет, совпадающий с цветом фильтра. И достигаем нужного нам результата:

CSS:


<style type="text/css" media="screen">
#test {
    border-top: 6px solid transparent;
}
</style>
<!--[if IE 6]>
<style type="text/css" media="screen">
#test {
	border-top-color: #ff00ff;
	filter:chroma(color=#ff00ff);
	height: 100px;
}
</style>
<![endif]-->

HTML:


<html>
	...
	<div id="test">test</div>
	...
</html>

Цвет прозрачности выбирается таким образом, чтобы его точно не оказалось на самом изображении (в данном случае — чистый кислотный розовый, RGB(255,0,255)).

CSS Internet Explorer

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>

Эмуляция border-color: transparent в Internet Explorer 6

Связанные материалы

Категории