常見的瀏覽器兼容性問題

瀏覽器兼容性問題一：

不一樣瀏覽器的標籤默認的外補丁和內補丁不一樣（margin和padding）

問題症狀：隨便寫幾個標籤，不加樣式控制的狀況下，各自的magin和padding差別較大。

解決方案：css裏 *{margin:0;padding:0;}

瀏覽器兼容性問題二：

塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。

問題症狀：常見症狀是ie6中後面的一塊被頂到下一行

碰到頻率：90%（稍微複雜點的頁面都會碰到，float佈局常見的瀏覽器兼容問題）

解決方案：在float的標籤樣式控制中加入display:inline;將其轉化爲行內屬性

備註：咱們最經常使用的就是div+css佈局了，而div就是一個典型的塊屬性標籤，橫向佈局的時候咱們一般都是div float實現的，橫向的間距設置若是用margin實現，這就是一個必然會碰到的兼容性問題。

瀏覽器兼容性問題三：

問題症狀：設置較小高度標籤（通常小於10px），在ie6，ie7，遨遊中高度超出本身設置高度。

解決方案：給超出高度的標籤設置overflow:hidden;或者設置行高line-height小於你設置的高度。

備註：這種狀況通常出如今咱們設置小圓角背景的標籤。出現這個問題的緣由是ie8以前的瀏覽器都會給標籤一個最小默認的行高的高度，即便你標籤是空的，這個標籤的高度仍是會達到默認的行高。

兼容性問題四：

問題症狀：ie6裏面的間距比超過設置的間距

解決方案：在display:block;後面加入display:inline;display:table;

備註：行內屬性標籤，爲了設置寬高，咱們須要設置display:block;(除了input標籤比較特殊)。在用float佈局並有橫向的margin後，在ie6下，他就具備了塊屬性float後的橫向margin的bug。不過由於它自己就是行內屬性標籤，因此咱們再加上display:inline的話，它的高寬就不可設了。這時候咱們還須要在display:inline後面加入display:talbe。

兼容性問題五：

問題症狀：圖片默認有間距：幾個img標籤放在一塊兒的時候，有些瀏覽器會有默認的間距，加了通配符也不起做用。

解決方案：使用float屬性爲img佈局

備註：由於img標籤是行內屬性標籤，因此只要不超出容器寬度，img標籤都會排在一行裏，可是部分瀏覽器的img標籤之間會有個間距。用float佈局去掉。

兼容性問題七：

問題症狀：透明度的兼容css設置

解決方案：/*CSS hack*/

hacker仍是很是好用的，使用hacker能夠把瀏覽器分爲3類：IE六、IE7和遨遊、其餘

◆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。由於優先級相同且想衝突的屬性設置後一個會覆蓋掉前一個，因此書寫的次序是很重要的。

FF、CH、OP、IE九、10都是能夠的，用css3的rgba(可是你得放棄IE8如下的效果）

要兼顧IE6-8的話，兩個辦法：1.不用透明度，用半透明的png圖片作背景(IE6不支持png背景透明度，用dd_png.js能夠很好解決這個問題)2.用透明度，但內容和透明的背景實際上不是父子關係，而是單獨的兩個層，一個層設置透明度，內容那個層用定位放到有透明度那個層上面去重疊$("#myElement").css({ opacity: .4 }); // 全部瀏覽器有效　　您也可使用一下jQuery代碼使一個元素動畫透明：$("#myElement").animate({ opacity: .4 }, 1000, function() { // 動畫完成，全部瀏覽器下有效 });