Question

在下面的代码中，我有2个div，每个div都有两个嵌套的div。当浏览器窗口在Firefox / IE8下重新调整大小时，一切正常 - 最右边的父div在第一个下面。

然而，在IE6下（或兼容模式的IE8），子div在第二个div换行中。更糟糕的是，事实上，我已经为div设置了一个最大高度。

在这种情况下，如何让IE6像IE8 / Firefox一样？我怎么能告诉DIV不要换行？请注意，文本是动态的，因此我无法将宽度设置为父级。

<!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>

Answer 1

您可以使用条件评论让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]-->

Answer 2

为什么不指定宽度百分比？这应该让它在没有包装的情况下像你想要的那样扩展和缩小。

Answer 3

正如我在DocType回答的那样：

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

在IE6和FF3.5中正常工作

这是因为div不再是块级元素浮动，但它们现在是内联元素。根据您的目标，这可能是也可能不是一个好的答案。

我认为问题的根源在于IE6对“white-space：nowrap”的“不足”。在IE6的情况下，它只适用于内联元素。

防止嵌套DIV换行（不指定父宽度）

3 个答案: