內聯 Style 簡寫屬性的發現

開始

平時在使用內聯樣式簡寫屬性的時候，可能沒有考慮到瀏覽器解析的問題。問題不大，簡寫的好處是代碼量少，但最近發現了一個有意思的內聯簡寫屬性的問題。

以下問題僅在內聯樣式裏會出現，如果是通過 style 標簽或 css 文件引入則不會有這樣的問題。

例子

background

設置一個元素的背景色為白色，比如這麽寫：

<div style="background: #fff;"></div>

你可能以為瀏覽器會這樣輸出：

<div style=""></div>

一下少了 6 個字節，而瀏覽器的真真實解析情況是：

潛在的問題是：**將會默認設置一些其他的屬性到樣式裏，而通過 CSS 又很難恢復這種默認屬性**。

驗證

我們來驗證一下這個問題：

使用屬性簡寫的瀏覽器呈現：

點擊查看

代碼幹貨｜內聯 Style 簡寫屬性的發現