需要CSS DIV邊框的幫助，IE和FireFox之間的不同視圖

我在展示IE和FireFox之間的div元素的邊框時出現差異的圖像。 IE以正確的方式顯示邊框，但不是FireFox。您可能會注意到，BorderDiv接縫的黑色邊框不尊重父母div高度爲78像素的事實。而不是它尊重大多數外部div的高度。使事情複雜化，邊界的右側也被繪製出來，而不考慮最外層的div。需要CSS DIV邊框的幫助，IE和FireFox之間的不同視圖

alt text

我迷失在這裏。我需要做什麼才能在IE中實現與FireFox相同的結果？請注意，我希望BorderDiv的寬度和高度等於100％，我不想明確設置它。

這裏是我的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML> 
<HEAD> 
</HEAD> 
<BODY> 
<div id = "MasterDiv" style = "float: left; width: 200px; height: 80px; background-color: Red"> 
    <div id = "RightDiv" style = "float: left; width: 100%; height: 78px; background-color: Blue;"> 
    <div id = "ContentColumn" style = "margin-left: 50px; height: 78px;"> 
    <div id = "BorderDiv" style = "border: solid 1px Black; height: 100%; width: 100%">right</div> 
     </div> 
    </div> 
    <div id = "LeftDiv" style = "float: left; margin-left: -100%; width: 50px; height: 78px; background-color: Green;">left</div> 
</div> 
</BODY> 
</HTML>

感謝。

來源

2010-11-23 Wodzu

哪個版本的IE和FF？ – 2010-11-23 10:12:14

FF：3.6.12，IE：8.0.7600 – Wodzu 2010-11-23 10:16:44

它實際上是相反的：Firefox是正確的，IE是不正確的。

這是因爲IE的box model不好執行。

div「BorderDiv」的容器div（「ContentColumn」）的高度爲78px。然後，最重要的是，添加邊框，填充和邊距。

爲什麼不邊境僅有添加到「ContentColumn」分區，擺脫了「BorderDiv」的完全的div：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML> 
<HEAD> 
</HEAD> 
<BODY> 
<div id = "MasterDiv" style = "float: left; width: 200px; height: 80px; background-color: Red"> 
    <div id = "RightDiv" style = "float: left; width: 100%; height: 78px; background-color: Blue;"> 
     <div id = "ContentColumn" style = "margin-left: 50px; height: 76px; border: solid 1px Black;"> 
      right 
     </div> 
    </div> 
    <div id = "LeftDiv" style = "float: left; margin-left: -100%; width: 50px; height: 78px; background-color: Green;"> 
     left 
    </div> 
</div> 
</BODY> 

</HTML>

編輯修改了「ContentColumn」擁有的76px的高度，考慮邊界的大小。

此外，你可能想要在IE中避免quirksmode，所以它會使用正確的盒子模型。

來源

2010-11-23 10:25:54

需要CSS DIV邊框的幫助，IE和FireFox之間的不同視圖

回答

相關問題