IE9不能正確計算寬度與浮動元素

當我創建說一個div容器與說100px寬度和位置2個div元素一個浮動到左邊，另一個到右邊界2px和寬度46px每個它們應該繪製在同一行上並排覆蓋父容器的整個寬度。這發生在Firefox和Chrome中，但IE9在單獨的行中繪製它們，爲了獲得與其他瀏覽器相同的效果，我需要在父元素中指定102px的寬度。這是爲什麼？IE9不能正確計算寬度與浮動元素

下面的代碼：

<html> 

<head> 

<style> 

div { 
margin:0; 
padding:0; 
} 

</style> 

</head> 

<body> 

<div style="border: 5px solid;width:100px;height:100px"> 

<div style='border:2px solid green;width:46px;height:46px;float:left'></div> 

<div style='border:2px solid 
green;width:46px;height:46px;float:right'></div> 
<div> 

</body> 

</html>

來源

2012-04-06 Bat0u89

添加一些代碼，也許我們可以協助。通過你提到的，我可以告訴你，你的主div中的浮動元素溢出，這就是爲什麼你的div沒有被包含。 – breezy 2012-04-06 18:26:41

我看不出兩個56px寬度的div如何在100px div父級中並排浮動... – mddw 2012-04-06 19:33:25

對不起，修正了它... – Bat0u89 2012-04-07 19:10:19

好的我找到了解決問題的辦法。

你必須做的是你必須添加DOCTYPE聲明例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

它似乎並沒有因爲IE的盒模型錯誤http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug 作爲將導致較小的元素此行爲... 我真的很困惑...

來源

2012-04-07 19:15:32 Bat0u89

就個人而言，我寧願使用display: inline-block比花車周圍得多。

無論如何，問題最可能的原因是兩個<div>元素之間的空白空格。它可能會改變第二個。嘗試刪除它（即，<div...>...</div><div...>...</div>）

來源

2012-04-07 11:48:04

所有的浮動塊都是塊元素，所以它們不受空白的影響，只要我儘管如此，我已經刪除了所有空白，但仍然面臨同樣的問題... – Bat0u89 2012-04-07 12:01:06

IE9不能正確計算寬度與浮動元素

回答

相關問題