首頁技術(shù)文章正文

新版web面試題css瀏覽器的兼容性問題

更新時間:2018-12-06 來源:黑馬程序員技術(shù)社區(qū) 瀏覽量:

CSS瀏覽器兼容性?


     答題技巧:因為這個問題主要是看你經(jīng)驗,一般有了開發(fā)經(jīng)驗的都會遇到這樣的坑,你只要說出幾個來大致就可以了。

1.對齊文本和文本輸入框

問題:

    當(dāng)input元素在設(shè)置了高時,在IE7、IE8、IE9下會出現(xiàn)文本和文本輸入框不能對齊的現(xiàn)象,其他正常,包括opera

解決:

vertical-align:middle;


2.容器寬度在瀏覽器中解釋不同

   問題:

   不同瀏覽器下寬度不同,比如說設(shè)置width:200px,在iE7、IE8、IE9下顯示的是200px,在FF、Chrome、Opera中顯示的是220px

解決:

   用width:200px; *width:220px,其中iE7、IE8、IE9會識別兩個寬度,以后者為準(zhǔn),故寬度為220px,在FF、Chrome、Opera中,識別第一個寬度,解析


3. Div居中問題

問題:

   IE7、IE8、IE9在設(shè)置了margin-left和margin-right為auto后,并不能使div居中顯示,其他行

解決:

  設(shè)定body居中,定義text-algin: center


4.字體大小問題

問題:

   對字體大小small的定義不同,在Firefox和Chrome中為small,而IE7、IE8、IE9中為16px,差別挺大

解決:

   明確說明字體的大小,例如16px


5.td高度的問題 (這里有興趣的同學(xué)可以研究一下。知道了這個問題,還在研究當(dāng)中)

問題:

    在IE9、IE10、FF、chrome中table中td的高度不包含border的寬度,但是IE7和IE8中td的高度包含了border的高度,設(shè)置line-height和height一樣。

解決:


6.如何對其文本和文本輸入框的內(nèi)容()

問題:

    當(dāng)input元素在設(shè)置了高和設(shè)置了text-align:center時,在IE7、IE8、IE9下會出現(xiàn)文本和文本輸入框內(nèi)容不能對齊的現(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;

   代碼的順序一定不能顛倒了,要不又前功盡棄了。因為瀏覽器在解釋程序的時候,如果重名的話,會用后面的覆蓋前面的,就象給變量賦值一個道理,所以我們把通用的放前面,越專用的越放后面



  這里舉了幾個例子,同學(xué)們可以自己總結(jié)。

  
作者:黑馬程序員前端與移動開發(fā)培訓(xùn)學(xué)院
首發(fā):http://cloud.itheima.cn/   

分享到:
在線咨詢 我要報名
和我們在線交談!