12個需要注意的規范樣式寫法解決瀏覽器兼容問題

前些日子一直在調兼容性問題 上網的時候發現了幾篇不錯的帖子，現在轉過來給大家分享下 

--  編者的話

瀏覽器兼容是令很多web前端頭痛的一個問題，因為不同瀏覽器使用內核及所支持的HTML等網頁語言標準不同，以及用戶客戶端的環境不同造成的顯示效果不能達到理想效果，對于瀏覽器兼容問題只有經過不斷的調試積累，規范樣式代碼，才能才能免去一些hack，減少很多額外的工作量。在這里分享下本人從事前端開發以來積累的瀏覽器兼容經驗。--（川也設計-瀘州網站制作）

1、IE6 7中一串寬度不固定的A標簽在寬度固定的容器中無法自動跳行，而是在最后邊被擠成一列，寬度只有一個字符寬，我們可以用span標簽包裹A標簽，span標簽設display:inline-block。

2、IE6 7中絕對定位的元素在沒有設置top(bottom)和left(right)的情況下會不受控制，所有必須設置這兩個值。

3、span標簽在IE6中為設置float屬性的時候，會與同行的其他元素上下不對齊，且局左邊有一定的間隙，會導致將后面的元素擠出去，另外span最好設置全局屬性display為inline-block，這樣可以減少一些不必要的調試。

4、label標簽是一個很不好控制的標簽，我們習慣與將input[checkbox]、input[radio]這兩個標簽放于label中，方便于點擊text文本的時候也能選中，這兩個標簽在谷歌等中無法與文本水平對齊，我們可以設置float屬性，然后就可以設置margin-top，寫個hack *margin在IE中為零，就能很好的處理這個問題。

5、右浮動元素，如果同行還有其他元素不設置左浮動，在IE6 7中將會掉到下一行。

6、margin-bottom，在IE6 7中是無效的，所以最好設置padding-bottom，或者下面的元素設置margin-top。

7、ul列表標簽中的li設置margin屬性的時候在ie6中會被雙倍放大，所以最好用padding屬性代替間距。

8、input[button]如果不需要邊框的話必須設為border:none 0;否則在IE6中還是會顯示邊框。

9、左圖又文字的結構，img標簽設置左浮動，p標簽可以只設置個padding-left或設置右浮動，否則在IE7中還是會被擠下來。

10、樣式注釋*/前面加上一個空格隔開，否則在IE6中如果注釋字符是奇數個的時候會跟*/解析成另一個字符。

11、截字省略號text-overflow:ellipsis;white-space:nowrap;overflow:hidden; 在Firefox中是不能支持，所以必須設置外圍元素的高度。

12、img標簽在IE6 7中左右又一個像素的間距，必須給img設置左浮動，img最好設置全局屬性display屬性為block。

感謝補充指正

原創（川也設計-瀘州網站制作）轉載請注明出處www.tranye.com