新版web面試題css瀏覽器的兼容性問(wèn)題

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 專(zhuān)用 _height: 100px;

IE7 專(zhuān)用 *+height: 100px;

IE6、IE7 共用 *height: 100px;

IE7、FF 共用 height: 100px !important;

   代碼的順序一定不能顛倒了，要不又前功盡棄了。因?yàn)闉g覽器在解釋程序的時(shí)候，如果重名的話，會(huì)用后面的覆蓋前面的，就象給變量賦值一個(gè)道理，所以我們把通用的放前面，越專(zhuān)用的越放后面

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

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