browser quirks mode and standard mode

最近在寫網頁,了解到有沒有在 html 頁面上加上 doctype declaration 有時候在頁面上看起來是有一些些差別的。

在撰寫測試用的網頁時,發在image在table row的最下方,即使把 css 設為 padding: 0; margin: 0; 都還是會出現一塊小小的間隔(gap)在image和table cell bottom border之間,如圖:
table_gap exmaple
在紅色區塊的下方有一小塊黃色的區塊,因為我將cell的背景設為黃色,所以多出來的gap會以黃色顯示出來。

這是因為在 html 檔案的第一行,我有加上 doctype 宣告,所以 mozilla 使用 standard mode 來顯示這一個網頁
在 quirks mode 中,顯示的是如下圖,是一個完全看不到黃色區塊的cell:
table_no_gap

在文章前面使用 doctype 是正確的做法,但是 css 中定義 image 在table 中顯示時,是用 inline 的方式顯示,且對齊一行中的 baseline ,而不是 bottom 所以會產生 gap 。解決的方式是使在 img tag 的 css 中加上:
vertical-align: bottom;
或是
display: inline;
就可以了。

另外,還有一些相關的文章:
1.Why are there gaps between image rows in tables when the layout engine is in the Standards mode?
2.wikipedia – Quirks mode 說明
3.Quirks Mode vs. Standards Mode

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

你正使用 WordPress.com 帳號留言。 登出 / 變更 )

Twitter picture

你正使用 Twitter 帳號留言。 登出 / 變更 )

Facebook照片

你正使用 Facebook 帳號留言。 登出 / 變更 )

Google+ photo

你正使用 Google+ 帳號留言。 登出 / 變更 )

連結到 %s

%d 位部落客按了讚: