Здравствуйте, мальчики и девочки!
Сначала небольшое введение:
<!doctype html>
<html>
<head>
<style>
body, div {
padding:1%;
}
body {
background-color:red;
}
div.div1 {
height:50%;
min-height:200px;
background-color:green;
width:100%;
position:absolute;
}
div.div2 {
float:left;
height:50%;
background-color:red;
}
div.div3 {
float:left;
height:40%;
background-color:grey;
}
img.img1 {
float:left;
height:96%;
background-color:black;
width:100px
}
img.img2 {
float:left;
height:50%;
width:100px;
background-color:black;
}
</style>
</head>
<body style="background-color:red;">
<div class="div1">
<div class="div2">
<img src="" class="img1" />
</div>
<img src="" class="img2" />
<div class="div3"></div>
</div>
</body>
</html>
Посмотреть можно здесь
Если коротко: есть главный div, от которого должны рассчитываться остальные значения в процентах. При этом данный div по высоте не должен быть меньше определенного значения. Написали, сделали, проверяем:
- Мозила - все работает
- Опера - значения рассчитываются правильно, но экран почему-то перерисовывается только если обновить страницу. При изменении ширины окна делает почти то, что надо (обновив экран видим, что было все-таки немного не то), но как-то скачками (ведешь - резко больше чем надо и сразу же норма). При изменении высоты окна - ведет себя как-то непредсказуемо: не увеличивает, уменьшает резко и скачками (т.е. до определенного момента не уменьшает, потом резкое уменьшение).
- IE 9 - все работает
- IE 8, Safari - появляются проблемы - div'ы ведут себя так как должны, а вот img ведет себя странно - насколько понял рассчитывает значения не от главного div'a, а от body, т.е. div'ы в один прекрасный момент перестают уменьшаться, а вот img продолжает успешно этим заниматься...
Решение (?):
У главного div'a ставим position:static. Появляются другие проблемы:
IE8, Opera, Safari, Мозила - расчет ведется от body, т.е. если у него height меньше min-height главного div'a, то соответственно и остальные элементы будут иметь далеко не ту высоту, которая нужна. В реальном проекте содержимое главного div'a полностью указано в процентах, т.е. все элементы сохраняют свое положение друг относительно друга, таким образом внешний вид сохраняется таким как надо... Ну или почти... min-height главного div'a никак не учитывается, а это не есть то, что требуется...
Какие могут быть причины такого странного поведения Safari в первом случае и почему игнорируется min-height во втором? Причем как игнорируется - только если надо рассчитать значения height внутренних элементов, сам же div сохраняет свой height равным min-height.