IE盒模型和標準盒模型
標準盒模型和ie盒模型(怪異盒模型)
-
w3c標準盒模型
- width和height不包括padding和border
-
ie盒模型
- width和height包含padding和border
- ie8以上都是w3c標準盒模型 ie5極其以下都是ie盒子模型,ie6、ie7、ie8在混雜模式下ie盒模型,在標準模式下是w3c標準盒模型
(註意:ie6在混雜模式下一定是Ie盒模型,而ie7、ie8在混雜模式下不一定是ie盒模型)
-
css3中的box-sizing
-
content-box w3c標準盒模型
-
boder-box IE盒模型 / 怪異盒模型
-
混雜模式和標準模式
在多年以前(IE6誕生以前),各瀏覽器都處於各自比較封閉的發展中(基本沒有兼容性可談)。隨著WEB的發展,兼容性問題的解決越來
越顯得迫切,隨即,各瀏覽器廠商發布了按照標準模式(遵循各廠商制定的統一標準)工作的瀏覽器,比如IE6就是其中之一。但是考慮到以
前建設的網站並不支持標準模式,所以各瀏覽器在加入標準模式的同時也保留了混雜模式(即以前那種未按照統一標準工作的模式,也叫怪
異模式)。經過多年的發展,後來又出現了近似標準模式(在一種模式中同時融入標準模式和部分混雜模式的特性,也稱為接近標準模式、
準標準模式、最有限混雜模式)和超級標準模式(近似標準模式、標準模式、超級標準模式三者也共同被稱作標準模式)。因此,瀏覽器的
模式可以分為兩類:標準模式和混雜模式,其中,標準模式又可更嚴格的分為近似標準模式、標準模式、超級標準模式。
- 混雜模式會讓IE的行為與(包含非標準特性的)IE5相同
而標準模式會讓IE的行為貼近W3C標準
1.<!DOCTYPE html> 2.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 3.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 標準模式可以通過doctype 和 嚴格型(strict)聲明來開啟。
而混雜模式可以通過過渡性(transitional)和框架集型(frameset)聲明來開啟
IE註釋判斷語句
IE特有功能,通過HTML註釋中的條件語句然不同的IE版本識別註釋中的內容,這對IE的hacks很有幫助。
1)<!--[if lt IE 7]> : 小於 IE7 的版本 ( Less than );
2)<!--[if lte IE 7]> : 小於或等於 IE7 的版本 ( Less than or equal );
3)<!--[if gt IE 7]> : 大於 IE7 的版本 ( Greater than );
4)<!--[if gte IE 7]> : 大於或等於 IE7 的版本 ( Greater than or equal );
5)<!--[if !IE 7]> : 不等於 IE7 的版本 ( Not );
6)<!--[if !IE]> :不等於 IE 的版本 ( equal );
<!--[if IE 6]> Only recognized in IE7; 只能被IE7識別 此處可以填樣式 <![endif]>
--------------------------------------end
IE盒模型和標準盒模型