常見的相容性問題：
1、不同瀏覽器的標籤預設的外邊距( margin )和內邊距(padding)不同
解決方案： css 裡增加萬用字元 *
2、ie6雙邊距問題；在 ie6中設定了float , 同時又設定margin , 就會出現邊距問題
解決方案：設定display:inline;
3、當標籤的高度設定小於10px，在ie6、ie7中會超出自己設定的高度
解決方案：超出高度的標籤設定overflow:hidden,或者設定line-height的值小於你的設定高度
5、ie9一下瀏覽器不能使用opacity
解決方案：
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:dximagetransform.microsoft.alpha(style = 0, opacity = 50);
6、邊距重疊問題；當相鄰兩個元素都設定了margin 邊距時，margin 將取最大值，捨棄最小值；
解決方案：為了不讓邊重疊，可以給子元素增加乙個父級元素，並設定父級元素為overflow:hidden；
7、cursor:hand 顯示手型在safari 上不支援
解決方案：統一使用 cursor:pointer
8、兩個塊級元素，父元素設定了overflow:auto；子元素設定了position:relative ;且高度大於父元素，在ie6、ie7會被隱藏而不是溢位；
解決方案：父級元素設定position:relative
技巧一：css hack
使用hack 我可以把瀏覽器分為3類：ie6 ；ie7和遨遊；其他（ie8 chrome ff safari opera等）
ie6認識的hack 是下劃線_ 和星號 *
ie7 遨遊認識的hack是星號 * （包括上面問題6中的 !important也算是hack的一種。不過實用性較小。）
比如這樣乙個css設定 height:300px;*height:200px;_height:100px;
ie6瀏覽器在讀到 height:300px的時候會認為高時300px；繼續往下讀，他也認識*heihgt， 所以當ie6讀到*height:200px的時候會覆蓋掉
前一條的相衝突設定，認為高度是200px。繼續往下讀，ie6還認識_height,所以他又會覆蓋掉200px高的設定，把高度設定為100px；
ie7和遨遊也是一樣的從高度300px的設定往下讀。當它們讀到*height200px的時候就停下了，因為它們不認識_height。所以它們會把高度
解析為200px；剩下的瀏覽器只認識第乙個height:300px;所以他們會把高度解析為300px。
因為優先順序相同且相衝突的屬性設定後乙個會覆蓋掉前乙個，所以書寫的次序是很重要的。
/* css屬性級hack */
color:red; /* 所有瀏覽器可識別*/
_color:red; /* 僅ie6 識別 */
*color:red; /* ie6、ie7 識別 */
+color:red; /* ie6、ie7 識別 */
*+color:red; /* ie6、ie7 識別 */
[color:red; /* ie6、ie7 識別 */
color:red\9; /* ie6、ie7、ie8、ie9 識別 */
color:red\0; /* ie8、ie9 識別*/
color:red\9\0; /* 僅ie9識別 */
color:red \0; /* 僅ie9識別 */
color:red!important; /* ie6 不識別!important 有危險*/
/* css選擇符級hack */
*html #demo /* 僅ie6 識別 */
*+html #demo /* 僅ie7 識別 */
body:nth-of-type(1) #demo /* ie9+、ff3.5+、chrome、safari、opera 可以識別
*/ head:first-child+body #demo /* ie7+、ff、chrome、safari、opera 可以識別 */
:root #demo : /* 僅ie9識別 */
越少的浮動，就會越少的**，會有更靈活的頁面，會有擴充套件性更強的頁面。
css屬性字首語義化：
前端瀏覽器相容性問題
在前端開發的過程中我們不可避免的會遇到瀏覽器相容性問題，這也是我們必須要解決的問題。首先來了解一下為什麼存在瀏覽器相容性問題。現在的市場上有很多種類的瀏覽器，不同種類的瀏覽器的核心也不盡相同，所以不同瀏覽器對 的解析會存在差異，這就導致對頁面渲染效果不統一的問題。市場上常見的瀏覽器核心主要有四種 w...
前端瀏覽器相容性問題 一
所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同一段 有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。var listenere...
瀏覽器相容性問題
苦惱的區別 1.image repeat 在火狐裡比較正常，可是在ie中一直repeat.背景是乙個關閉的x號，div設定的backgourn image url xx 結果在ie中卻不行，最後找到原因是ie中要顯式的寫上image repeat norepeat這屬性，還有好多的差異，明天 去了 ...