標準模式與怪異模式對於渲染頁面的影響

xgod發表於2019-03-04
模式

什麼是標準模式和怪異模式?

在很久很久以前,那時候HTML和CSS還沒有一個統一的標準,出現的現象就是,我用我的標準,你用你的標準,這導致了各家瀏覽器對於解析HTML和CSS的方式有很大的差別,而當標準制定出來之後,瀏覽器不僅要按照新的標準去支援HTML和CSS,還要對老舊的網頁進行相容,而這一前一後的兩種支援方式,就是我們所稱的標準模式(StandardMode,)和怪異模式(QuirksMode),對於現代規範的網頁,瀏覽器一般用標準模式去解析和渲染,而對於古老的網頁,瀏覽器就會使用怪異模式去渲染.而在ie的開發者工具中,你可以自定義改變文件模式,這在其他瀏覽器中是不行的.

瀏覽器怎麼確定要使用哪種模式?

這裡就會涉及到一段非常容易被人忽略的程式碼,那就是HTML文件第一行就會出現的文件型別宣告:DOCTYPE.你一定見過這兩種宣告方式:

<!DOCTYPE html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
複製程式碼
  • 第一種宣告方式說明這個頁面遵守了HTML5規範的,瀏覽器會自動選擇標準模式.
  • 在瀏覽器遇到第二種宣告方式時也會自動選擇標準模式,說明這個頁面遵守了HTML4規範,和第一種宣告方式會有一點區別,但是幾乎可以認為是一樣的.
  • 而當你沒有或者忘記對文件型別進行宣告的時候,瀏覽器就會選擇怪異模式,我們應該避免選擇這種模式,因為這種模式下瀏覽器對文件的解析和渲染和現代標準都有著很大的不同,這是一種非常危險的方式.

開發者還可以在< head >標籤中加入x-ua-compatible資訊來影響文件型別的判定,這裡就不做過多的介紹了,有興趣的同學可以自行搜尋.

標準模式和怪異模式下頁面渲染的區別

塊級元素(盒子模型)

標準模式和怪異模式下對於盒子模型的渲染效果差別是很大的. 在怪異模式下,給盒子模型設定的寬度width和高度height會將元素的content,padding,border都包含進去,如下圖所示:

Alt text

即:

width = border left + padding left + content width + padding right + border right

height = border top + padding top + content height + padding bottom + border bottom

而在標準模式下,給盒子模型設定的寬度和高度就是content的高度和寬度,如下圖:

Alt text
即:

width=content width

height=content height

這一個區別會導致渲染塊級元素的時候會出現很大的差別,所以兩種模式下渲染出來的頁面差別也會很大.

  • 示例: 我們定義一個div元素,分別設定寬高均為200px,padding為50px,border為20px紅色. 程式碼如下:
div.a{
  width: 200px;
  height: 200px;
  padding: 50px;
  border: 20px solid red;
}
複製程式碼

  • 在標準模式下如下圖:

    Alt text
    在這裡其實盒子的總寬度為200 + 50 * 2 + 20 * 2= 340px

  • 在怪異模式下如下圖:

    Alt text
    而在怪異模式下,整個盒子只有200px寬,而內容區域被壓縮到了200 - 50 * 2 - 20 * 2 = 60px

  • 而我們也可以通過box-sizing屬性手動的選擇width和height包含的範圍,具體的引數及含義如下

box-sizing:border-box //像怪異模式那樣,元素的border和padding被包含在給元素設定的width和height中
box-sizing:content-box //預設值.給元素設定的width和height屬性只表示content區域,而在width和height之外繪製padding和border
box-sizing:inherit //繼承父元素的box-sizing設定
複製程式碼

現在你一定明白了為什麼有的時候元素的大小超出我們的預期,只要加一個box-sizing:border-box,就能夠正常顯示了吧.

圖片的對其方式

CSS中的vertical-aligh屬性用於設定物件的初值對其方式,定義了行內元素的baseline要和所在行的baseline初值對齊,而在表格元素中,可以設定單元格里面的內容的對其方式,取值有baseline,bottom,top,middle等.用一幅圖來解釋:

Alt text
在標準模式下,inline元素和tablecell元素的verticle-aligh屬性預設取值是baseline,這也是我們有時會看到圖片底部會有幾畫素留白的原因. 但是當inline元素內只有圖,並且處於怪異模式的時候,inline元素裡的元素的vertical-aligh屬性預設值是bottom,此時就不會有白條的效果.

  • 示例: 定義一個表格,表格中只有一行,一列,進行演示,程式碼如下:
td.a {
  border:2px solid blue;
}

img.b {
  width:200px;
  height:200px;
  border:2px solid orange;
}
複製程式碼

在標準模式下,圖片底部可以看到有幾畫素的白條:

Alt text

而在怪異模式下,圖片底部沒有留白:

Alt text

現在你知道為什麼有時候圖片處理總是很難看了吧?因為瀏覽器工作在標準模式,只要把圖片的vertical-align屬性修改為bottom就解決啦!

行內元素的尺寸

行內元素分為replaced和non-replaced兩類,而像input,textarea,img等可以設定寬高的行內元素,成為replaced元素,而那些不能設定寬高的元素被稱為non-replaced元素,例如span. 而這些都是在標準模式的前提下,在怪異模式下,即使是non-replaced元素也可以被設定元素的寬高. 示例: 定義一個div,寬高均為200px,背景顏色為紅色,div內部有一個span標籤,給span標籤設定寬高均為100px,背景顏色為藍色.程式碼如下:

div.a{
  width: 200px;
  height: 200px;
  background-color: red;
}
span.b{
  width: 100px;
  height: 100px;
  background-color: blue;
}
複製程式碼

在標準模式下,可以看到span元素是看不到的,這是因為non-replaced元素的寬高由它的內容決定.

Alt text

而在ie的開發者工具中把模式調到ie5,可以看到span標籤是有寬高的:

Alt text

雖然ie5現在已經幾乎不存在了,但是瞭解這些可以幫助我們更深入的研究瀏覽器的渲染規則.

內部元素溢位處理

在實際的開發中,我們經常會遇到元素內部的內容溢位,而CSS的overflow屬性可以處理溢位的情況,預設是visible,即顯示溢位. 如果一個元素內部的內容出現了溢位,並且我們沒有設定overflow屬性,即預設vislble時:

  • 在標準模式下,溢位的部分會超出盒子本身,在盒子外部繼續顯示.
  • 而在怪異模式下,溢位的部分會擴充套件盒子本身,即外部盒子的大小不一定由css樣式決定,會根據內部內容的大小自動調整.

示例: 定義一個div,類名為a,寬高均為200px,背景顏色為紅色,div內部還有一個div標籤,類名為b,給內部的div標籤設定寬為100px,高為300px,背景顏色為藍色.程式碼如下:

div.a{
  width: 200px;
  height: 200px;
  background-color: red;
}
div.b{
  width: 100px;
  height: 300px;
  background-color: blue;
}
複製程式碼

可以看到在標準模式和怪異模式下渲染的差別:

標準模式:

Alt text
怪異模式:
Alt text

總結

對於標準模式和怪異模式渲染的差別,主要是瀏覽器發展的歷史以及各家標準的差異決定的,而現如今Web前端開發越來越趨向於標準化,工程化,所以我們應該儘量避免在實際開發中使用怪異模式來渲染頁面.這樣不僅有利於專案的維護,也會在渲染時減少很多不必要的衝突和怪異現象. 知道這些差異對一個專業的web前端工程師來說是必須的,在遇到上述問題的時候,需要能夠辨識出瀏覽器是工作在標準模式下還是怪異模式下,這對我們解決bug是很有幫助的.

前端小白,熱愛前端.

發展前端,從我做起.

正在找工作,如果覺得我符合您的標準,歡迎聯絡.

WX

相關文章