CSS瀏覽器相容性？


答題技巧：因為這個問題主要是看你經驗，一般有了開發經驗的都會遇到這樣的坑，你只要說出幾個來大致就可以了。

1.對齊文字和文字輸入框
問題：
當input元素在設定了高時，在IE7、IE8、IE9下會出現文字和文字輸入框不能對齊的現象，其他正常，包括opera
解決：
vertical-align:middle;


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

不同瀏覽器下寬度不同，比如說設定width：200px，在iE7、IE8、IE9下顯示的是200px，在FF、Chrome、Opera中顯示的是220px
解決：

用width:200px; *width:220px，其中iE7、IE8、IE9會識別兩個寬度，以後者為準，故寬度為220px，在FF、Chrome、Opera中，識別第一個寬度，解析


3. Div居中問題
問題：
IE7、IE8、IE9在設定了margin-left和margin-right為auto後，並不能使div居中顯示，其他行
解決：

設定body居中，定義text-algin: center


4.字型大小問題
問題：

 對字型大小small的定義不同，在Firefox和Chrome中為small，而IE7、IE8、IE9中為16px，差別挺大
解決：
明確說明字型的大小，例如16px


5.td高度的問題 （這裡有興趣的同學可以研究一下。知道了這個問題，還在研究當中）
問題：
在IE9、IE10、FF、chrome中table中td的高度不包含border的寬度，但是IE7和IE8中td的高度包含了border的高度，設定line-height和height一樣。
解決：


6.如何對其文字和文字輸入框的內容（）
問題：
當input元素在設定了高和設定了text-align:center時，在IE7、IE8、IE9下會出現文字和文字輸入框內容不能對齊的現象，其他正常，包括opera
解決：
在樣式中設定line-height:100px


7.CSS HACK的方法
所有瀏覽器 通用 height: 100px;
IE6 專用 _height: 100px;
IE7 專用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;
程式碼的順序一定不能顛倒了，要不又前功盡棄了。因為瀏覽器在解釋程式的時候，如果重名的話，會用後面的覆蓋前面的，就象給變數賦值一個道理，所以我們把通用的放前面，越專用的越放後面