IE7與FF浮動問題

下面的代碼將呈現不同的方式在IE7和FF3（NEW CODE張貼OLD CODE是誤導 - 混亂對不起）IE7與FF浮動問題

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<style> 
#boxr1{ 
background-color:#FFFFFF; 
border:3px solid #DDDDCA; 
float:right; 
width:420px; 

} 

#boxr2{ 

background-color:#FFFFFF; 
border:3px solid #DDDDCA; 
float:right; 
width:420px; 

} 

#boxleft{ 
border:3px solid #DDDDCA; 
color:#277491; 
width:300px; 
} 

</style> 
</head> 
<body> 
<div style="width:800px"> 
    <div id="boxr1">test<br/>test<br/></div> 

    <div id="boxr2">test2<br/>test2<br/></div> 

    <div id="boxleft">leftdiv</div> 
</div> 
<div style="clear:both;"></div> 
</body> 
</html>

我似乎無法找出是什麼原因造成的差異。我希望它像FF一樣行事（當然）。任何指導表示讚賞。我看到的區別是在FF中，左側div開始於頁面的頂部，而在IE中它被呈現在其他div的「下方」（儘管它在左側）。

來源

2009-10-14 user190110

我調整了一下你的原始示例，下面的代碼在IE，FF，Chrome和Opera中看起來是一樣的。

 <html> 
<head> 
<style> 

#wrapper{ 
    width: 923px; 
    vertical-align: top; 
} 

.boxRight{ 
background-color:#FFFFFF; 
border:3px solid #DDDDCA; 
float:right; 
margin:3px 0; 
width:560px; 

} 

#boxleft{ 

color:#277491; 
width:357px; 
float: left; 

} 

</style> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="boxleft">leftdiv</div> 
    <div id="boxr1" class="boxRight">test<br/>test<br/></div> 
    <div id="boxr2" class="boxRight">test2<br/>test2<br/></div>  
</div> 
<div style="clear:both;"></div> 
</body> 
</html>

編輯： 我更新了我的代碼的修改您的原職後。以上作品在FF，Chrome，IE，Opera中都有。

來源

2009-10-14 20:00:33 Chuck

我想要完成的是FF在我的原始示例中呈現的內容，即左側的div開始於與第一個「正確」div相同的高度。這個解決方案似乎讓div在左邊的下面。 – user190110 2009-10-14 20:04:22

更新的代碼。我還從元素中移動了包裝樣式，併爲右邊的方塊創建了一個類，因爲它們都是相同的。無需2班保持。我還將左邊的方框移到列表中的第一位。 – Chuck 2009-10-14 20:38:15

感謝這工作。 – user190110 2009-10-14 20:41:41

從FF 3.5開始，他們開始使用與其他更現代的瀏覽器（IE8，Safari，Chrome）相同的盒式模型渲染。 IE7正在使用較早的過時型號。您可能需要專門針對IE7使用CSS hack。一個常見的IE7黑客是*：first-child + html hack。

*:first-child+html <your class or id> 
{ 
    margin: ... 
}

這將僅針對IE7。如果你想針對FF 3+，你可以使用：

html>/**/body <your class or id> 
{ 
    margin: ... 
}

和FF 3.5 ONLY：

body:nth-of-type(1) <your class or id> 
{ 
    margin: ... 
}

來源

2009-10-14 19:42:43

由於IE 7並不確定，而其他現代元素的寬度時，包括填充瀏覽器爲你做的唯一選擇是使用IE 7只width:560px

來源

2009-10-14 19:47:17 halocursed

對不起，我原來的問題與填充/框模型無關，但左邊的div如何定位 - IE的垂直低於FF。請參閱有問題的更新代碼。 – user190110 2009-10-14 19:57:21

破解而不是做任何黑客，嘗試<html>標記之前添加此文檔的開頭：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

沒有文檔類型聲明，IE7進入quirksmode和填充工作方式與Firefox不同。

維基百科（在怪異模式IE7就像IE5在這方面）：

當寬度或高度爲任何塊級元素顯式指定，它應確定可見元素的唯一的寬度或高度，隨後填充邊界和邊距。 Internet Explorer 5包含指定寬度或高度內的內容，填充和邊框;這會導致一個盒子的縮小或縮短。

來源

2009-10-14 19:53:01

試過，沒有運氣 - 請參閱更新的問題，以更清楚地瞭解問題是什麼（我的第一套代碼令人困惑）。 – user190110 2009-10-14 19:58:06

IE7與FF浮動問題

回答

相關問題