IE: контент и размеры объекта.
Автор: lone
Сайт автора: http://www.ruDiz.ru/
Поговорим о такой специфичности браузера IE, как размер объекта, определяемый размером контента.
То есть если контент не помещаться в блок, а вы задали блоку фиксированные размеры, он все равно растянется на минимальную ширину и длину, необходимую для размещения его содержимого. Наблюдается такое только в IE.
В браузерах FF, Opera контент просто отобразится за пределами страницы.
Рассмотрим интересный пример по этой теме.
Ситуация: нужно задать очень маленькую высоту блоку. Проблема возникает с IE, так как блоки высотой меньше 18px он не делает.
Причина проста - размер предпологаемого контента, в данном случае текста. По умолчанию он в IE имеет высоту 16px и отступы по 1px cнизу и сверху.
Остается задать размер шрифта и размер отступов нулевыми и все будет шокаладно!
Для тех, кто в этот день в боевом транспорте.
В примере колдуем с блоком id= "а".
Если вы хотите блок высотой, скажем, 10px, но при этом вывести там текст, для шрифта можно например задать такме параметры:
font: normal 8px/2px Arial или font: normal 10px Arial;
Если вы cоздаете пустые блоки (в которых будет рамка для картинки, которая задана фоном блока) необходимо помещать в них элементарный контент, например символ пробела ,как это сделано в данном примере. Почему следует так делать, читайте в следующей статье "Паддинг пустому блоку с марджином в том же направленнии - обходимся без хаков"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META HTTP-EQUIV= "Content-Type" CONTENT= "text/html; charset= windows-1251">
<title>IE и высота блока</title>
<style type ="text/CSS">
* {margin: 0; padding: 0; border: 0}
#a{width:565px;
height:0;
background-color:#2400ff;
font: normal 0/0 Arial}
#b{width:565px;
height:21px;
background-color:#b2df00}
</style>
</head>
<body>
<div id= "a"> </div>
<div id= "b"> </div>
</body>
</html>
