讓人頭疼的CSS兼容
因爲之前對css的理解不夠深入，也沒有經過系統的學習，所以一度認爲css是前端最難的東西，但真的學習後，才發現css真的很難。。。有很多東西啊！！！
解決HTML5/css3兼容性
<!--[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
< ![endif]-->
CSS3中-moz、-ms、-webkit和-o分別代表什麼意思
1、-webkit-：代表safari、chrome瀏覽器私有屬性
2、-moz-：代表FireFox瀏覽器私有屬性
3、-o-：代表opera瀏覽器私有屬性
4、-ms-：代表IE瀏覽器私有屬性
-webkit-transition:width 2s; /* Safari and Chrome */
-moz-transition:width 2s; /* Firefox 4 */
-o-transition:width 2s; /* Opera */
-ms-transition:width 2s; /*ie */
接下來說說一些我知道的BUG：
- 不同瀏覽器的標籤默認的外補丁和內補丁不同
問題症狀：隨便寫幾個標籤，不加樣式控制的情況下，各自的margin 和padding差異較大。
解決方案：CSS裏 {margin:0;padding:0;}
備註：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會用通配符來設置各個標籤的內外補丁是0。 - 塊屬性標籤float後，又有橫行的margin情況下，在IE6顯示margin比設置的大( IE的雙邊距bug )
問題症狀:常見症狀是IE6中後面的一塊被頂到下一行
解決方案：在float的標籤樣式控制中加入 display:inline;將其轉化爲行內屬性
備註：我們最常用的就是div+CSS佈局了，而div就是一個典型的塊屬性標籤，橫向佈局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。
#IamFloat{
float:left;
margin:5px;/*IE下理解爲10px*/
display:inline;/*IE下再理解爲5px*/
}
圖片默認有間距
問題症狀：幾個img標籤放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。
解決方案：使用float屬性爲img佈局
備註：因爲img標籤是行內屬性標籤，所以只要不超出容器寬度，img標籤都會排在一行裏，但是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。（我的一個學生使用負margin，雖然能解決，但負margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）設置較小高度標籤（一般小於10px），在IE6，IE7，遨遊中高度超出自己設置高度
問題症狀：IE6、7和遨遊裏這個標籤的高度不受控制，超出自己設置的高度
解決方案：給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設 置的高度。
備註：這種情況一般出現在我們設置小圓角背景的標籤裏。出現這個問題的原因是IE8 之前的瀏覽器都會給標籤一個最小默認的行高的高度。即使你的標籤是空的，這個標籤 的高度還是會達到默認的行高。
例如: overflow:hidden zoom:0.08 line-height:1px