爲什麼IE8會忽略子元素的邊距？

當我在下面的代碼中添加margin到.child時，IE8忽略它。在現代瀏覽器中，相同的代碼按預期工作。這是什麼造成的？爲什麼IE8會忽略子元素的邊距？

<html lang=「de「 xml:lang=「de「 xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <meta http-equiv=「Content-Type「 content=「text/html「; charset=「iso-8859-1「 /> 
 
    <title></title> 
 
    <style> 
 
    .parent { 
 
     margin: 5px; 
 
     border: 10px solid blue; 
 
     position: relative; 
 
    } 
 
    .child { 
 
     margin: 10px; 
 
     border: 10px solid red; 
 
     padding: 4px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div class="parent"> 
 
    <p class="child" style="width:80%; position:relative; left:10px; top:10px; background-color:yellow;">I'm the CHILD! 
 
     <span id="textOutput"></span> 
 
    </p> 
 
    </div> 
 

 
</body> 
 

 
</html>

來源

2015-11-05 Manny_user3297459

IE8不是現代瀏覽器:) –

請包括完整的代碼（包括HTML）。無法使用提供的樣式重現此操作。 –

好的！我更新了我的代碼！請大家，再檢查一次！ –

的問題是，你沒有提供的doctype這意味着IE8不知道有什麼用渲染模式，因此默認爲怪癖模式。怪癖模式是必不可少的一個古老的，非標準的佈局引擎使用回來時，網絡是年輕人：

現在有在Web瀏覽器所使用的佈局引擎三種模式：怪異模式，幾乎是標準模式，和全標準模式。在怪癖模式下，佈局模擬了Navigator 4和Internet Explorer 5中的非標準行爲。這對於支持Web標準廣泛採用之前構建的網站來說至關重要。在完全標準模式下，行爲（希望）是由HTML和CSS規範描述的行爲。在幾乎標準模式下，只有很少的怪癖被執行。

怪癖模式和標準模式（https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode）

瀏覽器在處理缺乏以不同的方式doctype，你應該始終確保你在你的HTML開始指定一個保證的一致渲染你的頁。在撰寫本文時，我會推薦HTML5 doctype，因爲它很簡短，清晰且支持早於IE6。

<!DOCTYPE html> 
 
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
 
    <title></title> 
 
    <style> 
 
    .parent { 
 
     margin: 5px; 
 
     border: 10px solid blue; 
 
     position: relative; 
 
    } 
 
    .child { 
 
     margin: 10px; 
 
     border: 10px solid red; 
 
     padding: 4px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="parent"> 
 
    <p class="child" style="width:80%; position:relative; left:10px; top:10px; background-color:yellow;">I'm the CHILD! 
 
     <span id="textOutput"></span> 
 
    </p> 
 
    </div> 
 
</body> 
 

 
</html>

還應當指出的是，你需要使用正常的引號不彎引號爲您的屬性值，需要關閉html標籤。

來源

2015-11-06 14:09:11

爲什麼IE8會忽略子元素的邊距？

回答

相關問題