дайте этому элементу на всякий случай hasLayout.
Aykroyd
Огромное спасибо! Вы навели меня на верный путь к понимаю проблемы. Дело именно в hasLayout. Но в моём случае его включение оказывается вредным, вернее, имеет ещё один неожиданный побочный эффект из-за родителя float.
Мне нужно чтобы наследники плавающего блока считались по ширине как блоки.
Остаётся вопросом, что делать для правильного расчёта ширины, особенно для элементов, у которых hasLayout по умолчанию...
Вот иллюстрация, второй вариант наследника ведёт себя в IE7 не как блочный элемент:
Код:
* {
**** margin: 0;
**** padding: 0;
}
html, body {
**** color: #000;
**** font-family: Arial, Helvetica, Sans-Serif;
}
body {
**** min-height: 100%;
**** height: auto !important;
}
.parent {
**** float: left;
**** width: auto;
**** border: #000 solid 1px;
**** margin: 1em;
}
.child1, .child2 {
**** width: auto;
**** text-align: center;
}
.child1 {
**** background-color: #800;
******/* hasLayout off */
}
.child2 {
**** background-color: #080;
**** height: 1%; /* hasLayout on */
}
.sizer { width: 200px; }
Код:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
******** "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
**** <meta http-equiv="content-type" content="text/html; charset=utf-8" />
**** <title>hasLayout</title>
**** <link rel="stylesheet" type="text/css" href="hasLayout.css" /></head>
<body>
**** <div class="parent">
******** parent
******** <div class="child1">
************ child 1
******** </div>
********
**** </div>
**** <div class="parent">
******** parent
******** <div class="child2">
************ child 2
******** </div>
********
**** </div>
</body>
Ваши права
