Предотвращение переноса вложенных DIV (без указания родительской ширины) - PullRequest
Новая
       10

Предотвращение переноса вложенных DIV (без указания родительской ширины)

0 голосов
/ 31 августа 2009

В приведенном ниже коде у меня есть 2 div, каждый из которых имеет два вложенных div. Когда окно браузера изменено в Firefox / IE8, все работает хорошо - самый правый родительский div падает ниже первого.

Однако в IE6 (или IE8 с режимом совместимости) дочерний элемент делится во второй div-оболочке. Что еще хуже, это происходит, несмотря на то, что я установил максимальную высоту для div.

Как мне заставить IE6 вести себя как IE8 / Firefox в этом случае? Как я могу сказать DIVs не оборачивать? Обратите внимание, что текст является динамическим, поэтому я не могу установить ширину для родителя. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.parent
{
float: left;
border: solid 1px black;
height: 30px;
white-space: nowrap;
}

.child
{
float: left;
border: solid 1px grey;
width: auto;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<div class="parent">
<div class="child">
What is up, guy What is up, guy
</div>
<div class="child">
What is up, guy What is up, guy
</div>
</div>
<div class="parent">
<div class="child">
What is up, guy What is up, guy
</div>
<div class="child">
What is up, guy What is up, guy
</div>
</div>
</form>
</body>
</html>

Ответы [ 3 ]

0 голосов
/ 31 августа 2009

Почему вы не указываете ширину в процентах? Это должно заставить его расширяться и уменьшаться, как вы хотите, без упаковки.

0 голосов
/ 09 сентября 2009

Как мне ответили на DocType : 

.child {
    display:inline;
    border: solid 1px grey;
    width: auto;}

Отлично работает в IE6 и FF3.5

Это происходит потому, что div больше не являются элементами блочного уровня с плавающей точкой, но теперь они являются встроенными элементами. в зависимости от вашей цели, это может быть или не быть хорошим ответом.

Я думаю, что корень проблемы кроется в "недостаточной передаче" IE6 слова "пробел: сейчас". В случае IE6 он работает только со встроенными элементами.

0 голосов
/ 31 августа 2009

Вы можете использовать условные комментарии, чтобы IE использовал height, и использовать max-height везде. 

<link rel="stylesheet" type="text/css" href="path/to/stylesheet" />

<!--[if IE 6]>
<style type="text/css">
.parent {
  height: 30px;
}
</style>
<![endif]-->
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...