帶有填充的div內的Internet Explorer保證金問題

在這種情況下，Internet Explorer似乎沒有提供適當的保證金額度。它看起來像從盒子頂部測量邊距並忽略填充。爲什麼是這樣？有沒有很好的解決方法？這裏有一個例子：帶有填充的div內的Internet Explorer保證金問題

<!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> 
     <title></title> 

     <style type="text/css"> 
      .messagebox 
      { 
       border: solid 2px black; 
       background: blue; 
       color: white; 
       padding: 10px; /* Problem only when padding set */ 
      } 

      h1, h2, h3, h4 
      { 
       margin-top: 12px; 
      } 

     </style> 
    </head> 
    <body> 
     <div class="messagebox" style="width: 300px"> 
      <h4 style="text-align: center">In IE, this text is 10px higher than in FF.</h4> 
     </div> 
    </body> 
    </html>

我在IE7和FF3上工作。謝謝。

來源

2009-05-29 Kyle Ryan