К сожалению, 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)).
Похожие публикации:
- Эмуляция position: fixed в Internet Explorer 6
Internet Explorer 6 не поддерживает CSS-свойство position: fixed position, поэтому для эмуляции данного эффекта используют position: absolute и CSS expression.... - Поддержка RGBA в Internet Explorer
Как известно Internet Explorer не поддерживает указание цвета в RGBA, но большая часть фильтров понимает цвет в формате ARGB (alfa,... - Фикс z-index у select в Internet Explorer 6
В браузере Internet Explorer до седьмой версии был один очень неприятный баг - никаким образом нельзя было перекрыть элемент select.... - Визуальная шпаргалка: CSS совместимость с Internet Explorer 6, 7 и 8
В наши дни совместимость CSS-кода с различными браузерами стало очень важной задачей среди веб-дизайнеров и разработчиков. С каждой новой версией... - Таблица стилей под Opera
При вёрстке очень часто используются CSS-хаки (сам не сторонник данного подхода), чтобы добиться одинакового отображения страницы в разных браузерах. Для...
