更新時(shí)間:2017-11-20 來(lái)源:黑馬程序員 瀏覽量:
CSS瀏覽器兼容性?
答題技巧:因?yàn)檫@個(gè)問(wèn)題主要是看你經(jīng)驗(yàn),一般有了開(kāi)發(fā)經(jīng)驗(yàn)的都會(huì)遇到這樣的坑,你只要說(shuō)出幾個(gè)來(lái)大致就可以了。
1、對(duì)齊文本和文本輸入框
問(wèn)題:
當(dāng)input元素在設(shè)置了高時(shí),在IE7、IE8、IE9下會(huì)出現(xiàn)文本和文本輸入框不能對(duì)齊的現(xiàn)象,其他正常,包括opera
解決:
vertical-align:middle;
2、容器寬度在瀏覽器中解釋不同
問(wèn)題:
不同瀏覽器下寬度不同,比如說(shuō)設(shè)置width:200px,在iE7、IE8、IE9下顯示的是200px,在FF、Chrome、Opera中顯示的是220px
解決:
用width:200px; *width:220px,其中iE7、IE8、IE9會(huì)識(shí)別兩個(gè)寬度,以后者為準(zhǔn),故寬度為220px,在FF、Chrome、Opera中,識(shí)別第一個(gè)寬度,解析
3、Div居中問(wèn)題
問(wèn)題:
IE7、IE8、IE9在設(shè)置了margin-left和margin-right為auto后,并不能使div居中顯示,其他行
解決:
設(shè)定body居中,定義text-algin: center
4、字體大小問(wèn)題
問(wèn)題:
對(duì)字體大小small的定義不同,在Firefox和Chrome中為small,而IE7、IE8、IE9中為16px,差別挺大
解決:
明確說(shuō)明字體的大小,例如16px
5、td高度的問(wèn)題 (這里有興趣的同學(xué)可以研究一下。知道了這個(gè)問(wèn)題,還在研究當(dāng)中)
問(wèn)題:
在IE9、IE10、FF、chrome中table中td的高度不包含border的寬度,但是IE7和IE8中td的高度包含了border的高度,設(shè)置line-height和height一樣。
解決:
6、如何對(duì)其文本和文本輸入框的內(nèi)容()
問(wèn)題:
當(dāng)input元素在設(shè)置了高和設(shè)置了text-align:center時(shí),在IE7、IE8、IE9下會(huì)出現(xiàn)文本和文本輸入框內(nèi)容不能對(duì)齊的現(xiàn)象,其他正常,包括opera
解決:
在樣式中設(shè)置line-height:100px
7、CSS HACK的方法
所有瀏覽器 通用 height: 100px;
IE6 專用 _height: 100px;
IE7 專用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;
代碼的順序一定不能顛倒了,要不又前功盡棄了。因?yàn)闉g覽器在解釋程序的時(shí)候,如果重名的話,會(huì)用后面的覆蓋前面的,就象給變量賦值一個(gè)道理,所以我們把通用的放前面,越專用的越放后面
這里舉了幾個(gè)例子,同學(xué)們可以自己總結(jié)。
本文版權(quán)歸黑馬程序員前端與移動(dòng)開(kāi)發(fā)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者出處。謝謝!
作者:黑馬程序員前端與移動(dòng)開(kāi)發(fā)學(xué)院
首發(fā):http://web.itheima.com/