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文本的時候也能選中，這兩個標籤在Google等中無法與文本水平對齊，我們可以設定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