5個技巧躲避潛在的瀏覽器兼容性問題

瀏覽器兼容性問題老是讓人很頭疼，這裏介紹5個技巧來避免一些潛在的問題。

1.使用樣式重置

你能夠使用 normalize.css 或者reset.css以及其餘從網絡上能找到的樣式重置均可以。這裏我給出一個，來自於 Genesis 框架。

2.css3瀏覽器廠商兼容性前綴

若是你正在使用最新的 CSS 代碼，好比 box-sizing，或者 background-clip等，確保你使用了合適的供應商前綴。

3.避免paddingj和width一塊兒使用

當你給一個包含 width 的元素加 padding，那它實際顯示的要比本應顯示的大。由於 width 和 padding 會加到一塊兒。好比一個元素 width 是 100px，又給它加了一個 10px 的 padding。那某些瀏覽器會將該元素顯示成 120px的寬度。爲了解決這個問題，能夠這樣作：

4.浮動清理

確保你把浮動都清理掉了，若是不清理掉，可能會出現很奇怪的狀況。能夠使用下面的方法清理浮動：

5.測試一下

跨瀏覽器測試一下頁面在各個瀏覽器下的顯示狀況

完成以上5個步驟，基本上在頁面正式發佈前均可以發現並解決頁面兼容性問題