Прошу прощения, если тема избитая, однако, решения сходу найти не удалось.
Ситуация: родитель float: left;, дочерний блок содержит плавающие элементы и должен их охватывать.
Проблема: Установка дочернему элементу свойства overflow: auto; заставляет IE7 вычислять его ширину как для строчного элемента. Проблема не зависит от уровня родства, т.е. у "внучек" и "правнучек" та же проблема.
Вопрос: существует ли красивое css решение?
Спасибо.
Попробуйте не overflow: auto, а overflow: hidden.Цитата:
существует ли красивое css решение?
+ дайте этому элементу на всякий случай hasLayout.
AykroydЦитата:
дайте этому элементу на всякий случай hasLayout.
Огромное спасибо! Вы навели меня на верный путь к понимаю проблемы. Дело именно в 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>
Да, есть такой глюк в IE. Более того, лекарство от него мне неведомо (поверхностный анализ проблемы результатов не дал, а копаться глубоко, к сожалению, времени нет).
Тем не менее, лично мне все это никогда не создавало и не создает каких-либо проблем, поскольку флоатить что-либо куда-либо без назначения этому чему-либо какой-либо явной ширины – это, по моему скромному мнению, сомнительная практика (за исключением обычных графических изображений)...
Aykroyd, Большое спасибо!