Отсебятина Статьи Проекты
Облако тегов
Web CMS CSS htaccess HTML Javascript MySQL Php Безопасность Мониторы Новостная лента Оптимизация Ошибки Разработка сайта Часы Юзабилити оптимизация ошибки

Трапеция вместо CSS-треугольника
в IE 6. Решение

Отсебятина от 03 мая 2009 года.    Теги: CSS


При верстке под IE 6 я натолкнулся на проблему отображения CSS-угла, который принял форму трапеции.

О CSS-углах


Уже достаточно давно открыт способ рисования треугольников и прочих фигур с помощью CSS.
Рассмотрим пример рисования CSS-треугольника. Все очень просто — задаем блоку div ширину и высоту равную 0px, а border равным произвольному количеству пикселей (Примечание: толщина рамки не входит в габариты элемента). В нашем примере мы возьмем толщину рамки равной 33 пикселям.


<style type="text/css">
.angle {
height: 0px;
width: 0px;
border: 33px solid #eeeeec;
border-left: none;
border-right-color: #000000;
}
</style>
<div class="angle"></div>

CSS-треугольник:



Чтобы рамка не была в 66 пикселей, ставим значение левого края равным "none".

Общий цвет рамки должен соответствовать цвету фона. Если фон неоднородный, то общий цвет бордюра можно сделать прозрачным, указав в качестве цвета "transparent" (даже IE 6 его понимает).

Проблема IE 6 и её решение


Дело в том, что наш любимый и, слава Богу, уже реже встречаемый Internet Explorer 6 не очень дружит с пикселями. Он, в первую очередь, полагается на высоту строки троки стандартного текста и игнорирует все, что меньше неё. В результате чего, наш div будет иметь высоту 12pt (зависит от пользовательских настроек), а треугольник превратится в трапецию:


Трапеция вместо CSS-угла в IE 6

Неверное изображение CSS-треугольника в IE 6


Выход из ситуации довольно прост — указать размер шрифта и высотку строки равным 0 пикселей. Если второе не указать, то высота div будет ~1pt (что соответствует подстрочному / надстрочному интервалу).

<style type="text/css">
.angle {
height: 0px;
width: 0px;
border: 33px solid #eeeeec;
border-left: none;
border-right-color: #000000;
font-size: 0px;
line-height: 0px;
}
</style>
<div class="angle"></div>

Вид CSS угла в IE 6

Изображение CSS-треугольника в IE 6
Василий  12.12.2014 в 10:14
Помогли, спасибо
Оставить сообщение






Любое копирование должно сопровождаться ссылкой на сайт.
Если вам что-то не понравилось — сообщайте.
Кича Владимир
x
Мне не нравится этот сайт, удалить его