因應現代瀏覽器的百花齊放，使用 Normalize.css 或是 reset.css 變成一種在頁面剛開始刻劃時的必備操作。這回直接引用 Normalize.css 後，在客製化 grid system 發生了寬度計算上的問題。經過一番研究後，發現緣由是出在 border-box 並沒有一併調整所導致的。
緣由
Normalize.css 的內容，可以詳見 Github 上的內容。不過內容中並沒有全域的 box-sizing 的調整，這樣一來在計算邊框寬度會受影響，進而導致 Grid System 的客製化出現錯誤。
解決方法
將全域的 box-sizing 設置為 border-box 即可。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* 全域都設 border-box */ *, *::before, *::after { box-sizing: border-box; } /* 使用繼承方法，讓某些地方仍保留 content-box 的機會 */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } |
