常見兼容問題性問題有哪些

經常使用瀏覽器兼容問題一：不一樣瀏覽器的標籤默認的外補丁和內補丁不一樣
 
問題症狀：隨便寫幾個標籤，不加樣式控制的狀況下，各自的margin 和padding差別較大。
 
碰到頻率:100%
 
解決方案：CSS裏    *{margin:0;padding:0;}
 
備註：這個是最多見的也是最易解決的一個瀏覽器兼容性問題，幾乎全部的CSS文件開頭都會用通配符*來設置各個標籤的內外補丁是0。

經常使用瀏覽器兼容問題二：塊屬性標籤float後，又有橫行的margin狀況下，在IE6顯示margin比設置的大
 
問題症狀:常見症狀是IE6中後面的一塊被頂到下一行
 
碰到頻率：90%（稍微複雜點的頁面都會碰到，float佈局最多見的瀏覽器兼容問題）
 
解決方案：在float的標籤樣式控制中加入 display:inline;將其轉化爲行內屬性
 
備註：咱們最經常使用的就是div+CSS佈局了，而div就是一個典型的塊屬性標籤，橫向佈局的時候咱們一般都是用div float實現的，橫向的間距設置若是用margin實現，這就是一個必然會碰到的兼容性問題。

經常使用瀏覽器兼容問題三：透明度的兼容CSS設置
 
作兼容頁面的方法是：每寫一小段代碼（佈局中的一行或者一塊）咱們都要在不一樣的瀏覽器中看是否兼容，固然熟練到必定的程度就沒這麼麻煩了。建議常常會碰到兼容性問題的新手使用。不少兼容性問題都是由於瀏覽器對標籤的默認屬性解析不一樣形成的，只要咱們稍加設置都能輕鬆地解決這些兼容問題。若是咱們熟悉標籤的默認屬性的話，就能很好的理解爲何會出現兼容問題以及怎麼去解決這些兼容問題。
 
/* CSS hack*/ 我不多使用hacker的，多是我的習慣吧，我不喜歡寫的代碼IE不兼容，而後用hack來解決。不過hacker仍是很是好用的。使用hacker我能夠把瀏覽器分爲3類：IE6 ；IE7和遨遊；其餘（IE8 chrome ff safari opera等）
 
◆IE6認識的hacker 是下劃線_ 和星號 *
 
◆IE7 遨遊認識的hacker是星號 *
 
好比這樣一個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。由於優先級相同且想衝突的屬性設置後一個會覆蓋掉前一個，因此書寫的次序是很重要的。

經常使用瀏覽器兼容問題四：Ie6下，不識別最大寬、高度和最小寬高度，意即min-width/height和 Max-width/height在ie6中沒效果，
解決方法：(1)：.abc{border:1px blue solid;width:200px;height:200px;}
                          html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}
        (2)：.abc{width:200px;height:200px;_width:200px;_height:200px;}（由於ie6有一個特徵，當定義一個高度時，若是內容超太高度，元素會自動調整高度。）

經常使用瀏覽器兼容問題五：

像素問題：ie6下，當浮動元素與流動元素並列顯示時，他們之間會存在三像素問題。
   解決方法：用hack技術， 例如：全部瀏覽器通用 height:100px; 
                                                  ie6專用_height:100px;
                                                  ie7專用*+height:100px; 
                                                  ie6/ie7共用*height:100px;

經常使用瀏覽器兼容問題六：

ie6 不支持 fixed 
複製代碼
/*對於非IE6能夠這樣寫*/
#top{  
    position:fixed;  
    bottom:0;  
    right:20px;  
}  

/*可是IE6是不支持fixed定位的，須要另外重寫*/
#top{  
    position:fixed;  
    _position:absolute;  
    top:0;  
    right:20px;  
    _bottom:auto;  
    _top:expression(eval(document.documentElement.scrollTop));
}  

/*使用hack使IE6實現該效果，但這個東東會閃爍，須要如下代碼*/
*html{  
    background-image:url(about:blank);  
    background-attachment:fixed;  
}  

/*使固定在頂部*/
#top{  
    _position:absolute;  
    _bottom:auto;  
    _top:expression(eval(document.documentElement.scrollTop));  
}  

/*固定在底部*/
#top{  
    _position:absolute;  
    _bottom:auto;  
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0)));  
}  
/*垂直居中*/
#top{
    position:fixed;
    top:50%;
    margin-top:-50px;
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2)); 
}