缺少HTML Doctype造成的樣式問題

2021-09-25 09:31:31 字數 1895 閱讀 4220

html頁面中頂部缺少doctype會給布局和樣式帶很詭異的影響,從樣式和位置細節找不到問題原因時,第乙個就要考慮是不是缺少doctype文件型別宣告。目前比較常用的doctypehtml5型別:

這個宣告使ie8、ie9處於standards mode標準模式,ie7、ie6處於almost standards mode標準相容模式,firefox等現代瀏覽器基本是standards mode標準模式,詳細參考這個**。

怪癖模式、標準模式和準標準分別表示為q、s和a。當瀏覽器僅有兩種模式時,如果**單元格的行高和mozilla的標準模式表現一致時,標準模式標記為「s」,如果**單元格的行高和mozilla的準標準模式表現一致時,則標記為「a」。

瀏覽器的模式選擇,有三個:

quirks mode, standards mode, almost standards mode

效能q>a>s,其中ie的q模式不支援css2.1,但效能最好,比其他模式快很多很多.

ie很重要,效能很重要,對使用者來說,最好的模式就是q, 對開發者而言,最好的模式是s

收集一下缺少doctype遇到過的問題現象:絕對定位元素位置偏移,怎麼調都沒用

firefoxchrome中,**font-size沒有繼承父類元素大小,莫名其妙變大了幾畫素。

一開始給table元素新增:font-size: inherit; 解決了,後來發現還是沒有doctype的問題。

a鏈結元素hover效果沒有上去

解決方法有若干種,我就說乙個我常用的

vertical-align

: bottom;

談乙個比較細節.

有時候,不用解決方法,照樣沒有5個畫素 ,非常完美.

因為執行在了幾乎標準的模式(limited quirks)

知乎上的解釋:

首先,瀏覽器並沒有所謂的"html 5 模式",而是只有三種:怪異模式(quirks),幾乎標準的模式(limited quirks)和標準模式(standards),其中幾乎標準的模式和標準模式之間的唯一差異在於是否對元素給定行高(line-height)和基線(baseline)。幾乎標準模式中,如果標籤所在行沒有其他的行內元素,將不指定基線(baseline),標籤因此會緊貼著父元素底部。

html5 doctype是更現代的doctype,在瀏覽器中引起標準模式。xhtml 1.0 transitional doctype導致有限怪癖模式。

HTML DOCTYPE 的重要性

定義和用法 宣告必須是 html 文件的第一行,位於 標籤之前。宣告不是 html 標籤 它是指示 web 瀏覽器關於頁面使用哪個 html 版本進行編寫的指令。在 html 4.01 中,宣告引用 dtd,因為 html 4.01 基於 sgml。dtd 規定了標記語言的規則,這樣瀏覽器才能正確地...

HTML DOCTYPE 的重要性

定義和用法 宣告必須是 html 文件的第一行,位於 標籤之前。宣告不是 html 標籤 它是指示 web 瀏覽器關於頁面使用哪個 html 版本進行編寫的指令。在 html 4.01 中,宣告引用 dtd,因為 html 4.01 基於 sgml。dtd 規定了標記語言的規則,這樣瀏覽器才能正確地...

生活不是缺少樂趣,而是缺少發現

很長一段時間我都不上csdn,原因很簡單 因為這裡沒有太多有用的東西,這樣打擊面是不是太大啦?畢竟有很多部落格還是寫的很好的,少數專家的文章就不評價了 業界新聞每次都是比豆腐乾還小的一塊,被大堆的ad圍在頁面的中間 就算是做廣告也拜託把頁面弄得整潔好看點吧!這還不算什麼,更要命的是csdn的編輯常常...