css瀏覽器兼容問題(在IETester及其他瀏覽器中親試過)_html/css

最近在研究一些關(guān)于瀏覽器兼容性問題的css問題，先歸納總結(jié)如下：
（1）在一些現(xiàn)代瀏覽器（opera，chrome，谷歌，safari）中，如果給塊級標(biāo)簽如div設(shè)置padding后會導(dǎo)致元素的height和width增加，在IE中則不會增加，但是只在IE6中不增加，IE7以上在IETester中測試都會增加,解決辦法：可以使用 !important 多設(shè)一個(gè) height 和 width

（2）使元素水平垂直居中：垂直居中：將該元素的line-height設(shè)置為元素本身的高度，再通過vertical-align： middle；（ 注意內(nèi)容不要換行），水平居中：將元素的margin設(shè)置為auto；但是在IE5下沒有效果

（3）想給像a，spa這樣的行內(nèi)元素進(jìn)行樣式設(shè)置，需要將它的display設(shè)置為block

（4）IE在浮動(dòng)時(shí)候產(chǎn)生的雙倍距離：若給一個(gè)div設(shè)置了float,
并且設(shè)置了margin，IE5和IE6會產(chǎn)生雙倍的間隔，但是在其它的IE版本下就不會，在一些現(xiàn)代瀏覽器中也不會。解決辦法：給該元素添加一個(gè)樣式：display:inline即可

（5）第二點(diǎn)是 ie對于css的magin padding 等默認(rèn)值為0px，但ff卻不一樣，為了保持外觀的統(tǒng)一性，即使padding為0你也要寫上，以免ff在瀏覽中的錯(cuò)位。

（6）firefox不支持hand，但ie支持pointer ，兩者都是手形指示。 解決方法：統(tǒng)一使用pointer。

（7）ul標(biāo)簽在FF下面默認(rèn)有l(wèi)ist-style和padding， 最好事先聲明， 以避免不必要的麻煩;（常見于導(dǎo)航標(biāo)簽和內(nèi)容列表）

（8）作為外部wrapper的div不要定死高度， 最好還加上 overflow： hidden;以達(dá)到高度自適應(yīng);

（9）透明度問題：IE下：filter:alpha(opacity=opacityValue);其中opacityValue的值為0-100的整數(shù)，firefox下以及其他瀏覽器：opacity=opacityValue;其中opacityValue的值為0-1的小數(shù)

（10）有關(guān)float屬性帶來的差異性:
1:如下情況：
.left{width: 300px;height: 300px;float: left;border:1px solid black;}
.center{width: 400px;height: 400px;float: left;border:1px solid black;}
.right{width: 200px;height: 200px;border:1px solid black;clear: both;}
one
twod
three
（簡寫）在IE7及以上還有一些現(xiàn)代瀏覽器中會發(fā)生布局錯(cuò)位，而在IE5和IE6中會發(fā)生類名為right的塊在前面兩塊右側(cè)正常顯示，一般會給right加一個(gè)css樣式進(jìn)行限制：clear:both

2:作為外部 wrapper 的 div 不要定死高度,為了讓高度能自動(dòng)適應(yīng)，要在wrapper里面加上overflow:hidden; 當(dāng)包含float的 box的時(shí)候，高度自動(dòng)適應(yīng)在IE下無效，這時(shí)候應(yīng)該觸發(fā)IE的layout私有屬性.用zoom:1;可以做到，這樣就達(dá)到了兼容。 例如某一個(gè)wrapper如下定義： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

(11)當(dāng)內(nèi)部元素面積大于外部元素面積時(shí)：如下例：
.page{width: 920px;height: 300px;background: purple;margin: 0 auto;}
.center{width: 400px;height: 400px;border:1px solid black;}

twod

雖然外部元素定義了寬度，在IE5和IE6中，page的背景顏色會隨著內(nèi)部元素的高度變，但是在IE7及以上，page的背景顏色渲染的還是page本身定義的面積，不會隨著內(nèi)部元素比自身大而改變

（12）高度不適應(yīng)問題：
.page{width: 920px;auto;background: purple;margin: 0 auto;}
p{margin-top: 20px;margin-bottom: 20px; text-align:center;}

aaaasddddddddddddddddddddddddddddddddddddddddd

在IE5、IE6、IE7中都會有正常的高度自適應(yīng)，但是在IE的其他版本中以及所有現(xiàn)代瀏覽器中，page的背景渲染只會容納p元素本身的高度
解決辦法：在p標(biāo)簽前后定義兩個(gè)空的div，并且樣式設(shè)置為如下：

.page{width: 920px;auto;background: purple;margin: 0 auto;}
p{margin-top: 20px;margin-bottom: 20px; text-align:center;}
.empty{height:0px;overflow:hidden;}

aaaasddddddddddddddddddddddddddddddddddddddddd

這種方法在IE5中會再次增加高度，在safari中沒有效果，但是在其他現(xiàn)代瀏覽器以及IE的其他版本中都是可以正常顯示的

(13)在無序列表中，如何設(shè)置使超出li元素的部分以省略號顯示：isplay:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;若該li元素在table中，則需要再增加一個(gè)樣式：table{table-layout: fixed;}才會正常顯示。這個(gè)顯示除了在IE5中不能正常顯示外，在其他瀏覽器中都可以正常顯示

（14）IE6下圖片下方會有空隙.解決辦法：為img加上display:block或設(shè)置vertical-align 屬性為vertical-align:top | bottom |middle |text-bottom

(15)文字和表單對齊方法：

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com