ZODIOS.net

Особенности свойства height

09.6.2008  –  Рубрика: HTML&CSS

В блочной модели верстки CSS свойство height ведет себя не так как одноименный атрибут height разметки. С логической точки, когда блоку присваивается свойство, height он должен быть заданной свойством высоты и при увеличении содержимого блока его высота должна растягиваться. Но на практике все происходит не так.

При увеличении содержимого блока до размеров, которые превышают размеры блока, его содержимое вываливается за границы блока. Так происходит во всех браузерах кроме Internet Explorer 6, в этом браузере все происходит логически, при увеличении содержимого блок растягивается до нужных размеров, чтоб вместить в себе все содержимое.

Во всех остальных браузерах свойство, которое ведет себя аналогично свойству height, является свойство min-height. Но проблема состоит в том, что браузеру IE6 неизвестно это свойство. Таким образом, нам необходимо сделать так, чтоб браузер Internet Explorer 6 видел только свойство height, а все остальные браузеры свойство min-height.

Для решения этой проблемы я привожу два способа. Первый – короткий, он основан на хаке Internet Explorer 6, но он не проходит валидацию CSS, второй более громоздки, зато проходит валидацию.

Вариант 1 (* html)

Суть метода в том что мы воспользуемся хаком(подробней о хаках можно прочитать в заметке Хаки – краткий путь к кроссбраузерности?) для браузера Internet Explorer 6. Этот браузер воспринимает селектор, родительским которого является *html, а вот все остальные браузеры данное свойство игнорируют, под него не попадает ни один из элементов, так как у html нет родителя, который бы описывался звездочкой, а ие6 считает что родитель таки у него есть и применяет свойство. . Таким образом, мы можем задать отдельно селектор, который будет воспринят только браузером Internet Explorer 6

#someDiv {
  width:300px;
  min-height:300px;
}
* html #someDiv{
  height:300px;
}

Вариант 2 (auto !important)

Этот метод является более элегантным и лишает необходимости создавать дополнительный селектор. Метод состоит в том что браузер IE6 не воспримет свойство селектора !important(это свойство устанавливает приоритетность), которое указывает на важность auto(это свойство указывает на то что размеры элемента зависят от размеров его содержимого), а воспримет только свойство, которое в этом браузере работает нужным нам образом. Все остальные браузеры воспримут все свойства размеров, но так как для свойства auto установлено !important оно будет самым главным таким образом элемент будет иметь размеры и его размеры будут увеличиваться при увеличении размеров содержимого.

#someDiv {
  min-height: 300px;
  height: auto !important;
  height: 300px;
}

Есть еще пару свойств которые не поддерживает Internet Explorer, это – min-width, max-width, подробней о них можно прочитать в заметке Эмуляция min-width, max-width под IE6.

Tags: CSS