對IE6下盒模型的誤解

admin發表於2017-02-19
模型

相當一部分教程都有關於盒模型的介紹，基本無一例外都會對IE6下的盒模型進行特別的說明，基本上都是表達一個意思：

[HTML] 純文字檢視 複製程式碼
IE6以上的IE瀏覽器和FF等標準瀏覽器都是遵循標準的盒模型，也就是說物件的實際佔用寬度是width+padding+border，實際佔用高度是height+padding+border，IE6下物件的實際佔用寬度就是width，實際佔用高度是height。

其實此種說法是不全面的，IE6瀏覽器已經修復了這個bug，只要是正確的宣告瞭DTD，就會遵循標準盒模型。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.antzone {
  width: 200px;
  height: 200px;
  border: 10px solid red;
  padding: 10px;
}
</style>
</head>
<body>
<div class="antzone"></div>
</body>
</html>

上面程式碼無論在IE6還是其他標準瀏覽器下世紀佔用的寬度都是200px+10px+10px+10px+10px。


相關文章