12個(gè)需要注意的規(guī)范樣式寫法解決瀏覽器兼容問題

前些日子一直在調(diào)兼容性問題 上網(wǎng)的時(shí)候發(fā)現(xiàn)了幾篇不錯(cuò)的帖子，現(xiàn)在轉(zhuǎn)過來給大家分享下 

--  編者的話

瀏覽器兼容是令很多web前端頭痛的一個(gè)問題，因?yàn)椴煌瑸g覽器使用內(nèi)核及所支持的HTML等網(wǎng)頁(yè)語(yǔ)言標(biāo)準(zhǔn)不同，以及用戶客戶端的環(huán)境不同造成的顯示效果不能達(dá)到理想效果，對(duì)于瀏覽器兼容問題只有經(jīng)過不斷的調(diào)試積累，規(guī)范樣式代碼，才能才能免去一些hack，減少很多額外的工作量。在這里分享下本人從事前端開發(fā)以來積累的瀏覽器兼容經(jīng)驗(yàn)。--（川也設(shè)計(jì)-瀘州網(wǎng)站制作）

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

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

3、span標(biāo)簽在IE6中為設(shè)置float屬性的時(shí)候，會(huì)與同行的其他元素上下不對(duì)齊，且局左邊有一定的間隙，會(huì)導(dǎo)致將后面的元素?cái)D出去，另外span最好設(shè)置全局屬性display為inline-block，這樣可以減少一些不必要的調(diào)試。

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

5、右浮動(dòng)元素，如果同行還有其他元素不設(shè)置左浮動(dòng)，在IE6 7中將會(huì)掉到下一行。

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

7、ul列表標(biāo)簽中的li設(shè)置margin屬性的時(shí)候在ie6中會(huì)被雙倍放大，所以最好用padding屬性代替間距。

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

9、左圖又文字的結(jié)構(gòu)，img標(biāo)簽設(shè)置左浮動(dòng)，p標(biāo)簽可以只設(shè)置個(gè)padding-left或設(shè)置右浮動(dòng)，否則在IE7中還是會(huì)被擠下來。

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

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

12、img標(biāo)簽在IE6 7中左右又一個(gè)像素的間距，必須給img設(shè)置左浮動(dòng)，img最好設(shè)置全局屬性display屬性為block。

感謝補(bǔ)充指正

原創(chuàng)（川也設(shè)計(jì)-瀘州網(wǎng)站制作）轉(zhuǎn)載請(qǐng)注明出處www.tranye.com