前些日子一直在調兼容性問題 上網的時候發現了幾篇不錯的帖子，現在轉過來給大家分享下
-- 編者的話
瀏覽器兼容是令很多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