關於ie的盒子模型bug

2022-03-29 01:36:52 字數 493 閱讀 4245

關於盒子模型,引入w3cschool的乙個圖即可解釋:

css2.1標準規定,設定乙個元素的width,height值,為其定義內容尺寸,即這個尺寸是作用在該元素的context box上的。

但是當給乙個塊級非替換元素設定width、height時,他們在ie6,ie7,ie8在混雜模式下(quriks mode)被錯誤的作用到了該元素的border box上,也就是說在這些瀏覽器中,width、height並不被認為是「內容尺寸」。這就是臭名昭著的ie盒模型bug。

解決這個問題最簡單的方法是頁面工作在標準模式下。

關於混雜模式和標準模式:如果頁面沒有宣告則所有瀏覽器預設都會開啟混雜模式。因此建議編寫頁面時都加上doctype宣告,最簡單的是宣告為html5格式的,這樣頁面就執行在標準模式下,不會出現ie的盒子模型bug了。

css 盒子模型 ie盒子模型

css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型,ie盒子模型,注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...

標準盒子模型和IE盒子模型

盒子模型是css中乙個重要的概念,理解了盒子模型才能更好的排版。其實盒子模型有兩種,分別是ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同,先來看看我們熟知的標準盒子模型 從上圖可以看到標準w3c 盒子模型的範圍包括 margin border padding content,並...

css 標準盒子模型和IE盒子模型

利用css來布局頁面布局div有點邏輯性 重點理解盒子模型,標準流和非標準流的區別,還有定位原理 把這3個攻破了,就非常簡單了 多實踐多參考 最後就是相容問題了,在實踐中自然就有經驗了 這些相容技巧都是經驗來的 盒子模型有兩種,分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不...