防止嵌套DIV包裹（不指定父寬度）

在下面的代碼中我有2個div，每個div有兩個嵌套的div。當瀏覽器窗口在Firefox/IE8下重新調整大小時，它一切正常 - 最右邊的父div落在第一個下面。防止嵌套DIV包裹（不指定父寬度）

但是，在IE6下（或具有兼容模式的IE8）第二個div換行中的子div。更糟糕的是，這發生了DESPITE事實，我已經爲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>

來源

2009-08-31 VitalyB

IE6不支持最大高度，一件事 – 2009-08-31 16:01:37

即使只有「高度」工作，我也會很開心。 – VitalyB 2009-08-31 16:36:40

正如在DocType回答我：在IE6

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

工作正常，FF3.5

這是因爲的div不再塊級元素浮動，但他們現在是內聯元素。取決於你的目標，這可能會或可能不會是一個好的答案。

我認爲問題的根源在於IE6對「white-space：nowrap」的「低估」。在IE6的情況下，它只適用於內聯元素。

來源

2009-09-09 11:32:45 VitalyB

你可以在答案中添加更多細節嗎？因爲它只是一個鏈接，鏈接如何回答這個問題並不明顯。 – Krease 2014-02-18 05:15:54

好點。我解決了。 – VitalyB 2014-02-22 20:10:41

你可以使用條件的意見得到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]-->

來源

2009-08-31 17:51:13

它不起作用。即使我只是將「高度」放在其中（無條件），它仍然忽略了高度。 – VitalyB 2009-09-01 08:44:00

爲什麼不用百分比指定寬度？這應該使它像你想要的那樣展開和縮小而不包裹。

來源

2009-08-31 18:31:49 idrumgood

我無法指定百分比，因爲在我的佈局中有未知數量的父盒子，我不知道它們的相對寬度和固定寬度。但它會解決問題。 – VitalyB 2009-09-01 08:45:33

防止嵌套DIV包裹（不指定父寬度）

回答

相關問題