CSS Reset / 樣式初始化 -使用 normalize.css

為什麼在不同瀏覽器中樣式會有差異?

網頁開發中，新手最常遇到的問題，其中之一就是瀏覽器樣式差異。每個瀏覽器彼此都有自己的 CSS 樣式，而新手開發中，往往也不會針對 HTML 最基礎的樣式進行個別調整，這就往往造成了開發完成後，換個瀏覽器預覽，卻發現出現跑版、破版…等狀況。

為了解決這個問題，你可以自己針對 CSS 樣式進行調整，但這邊推薦一款工具 normalize.css ，這款 css 能有效解決瀏覽器彼此間樣式上的微小差異問題。

解決方法

遇到這種問題，常見的解決方法有 :

針對跑版、有差異的地方個別解決

如果你的網頁數量或架構已經開發到非常龐大，深怕會影響到其他區塊時，最保險的辦法，建議還是針對錯誤的地方修正。

使用 normalize.css 減小差異

如果你正在開發階段，或是網頁頁面較少，樣式較為統一，建議可以使用 normalize.css，來減小瀏覽器帶來的樣式差異問題。

如果你的網站已經正式對外，還是可以使用 normalize.css，不過會建議用在新增加的頁面上，這樣可以使網站影響範圍變小，也有助於加快後續開發。

看 normalize.css 官方說明，有許多框架、平台已經使用( 有興趣可以到官方底下看 )，其中大家常用的 Bootstrap 也是使用它，所以如果妳是採用 Bootstrap，那這包是可以忽略的。

安裝方式

安裝使用方式也很簡單，這邊同樣使用NPM進行安裝，如下 :

npm install normalize.css

安裝之後，就可以依據需求，將該工具用引入於 CSS 最上方，就可以有效解決瀏覽器之間樣式差異問題。