不同瀏覽器的內(nèi)核也不盡相同吠撮，所以各個(gè)瀏覽器對(duì)網(wǎng)頁(yè)的解析存在一定的差異尊惰。
瀏覽器內(nèi)核主要分為兩種，一是渲染引擎泥兰，另一個(gè)是js 引擎弄屡，內(nèi)核更加傾向于說(shuō)渲染引擎。
常見(jiàn)的瀏覽器內(nèi)核：

image

不同瀏覽器的默認(rèn)樣式存在差異鞋诗，可以使用 Normalize.css 抹平這些差異膀捷。

1.不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同

問(wèn)題癥狀：隨便寫(xiě)幾個(gè)標(biāo)簽，不加樣式控制的情況下削彬，各自的margin 和padding差異較大全庸。

碰到頻率:100%

解決方案：CSS里 *{margin:0;padding:0;}

備注：這個(gè)是最常見(jiàn)的也是最易解決的一個(gè)瀏覽器兼容性問(wèn)題，幾乎所有的CSS文件開(kāi)頭都會(huì)用通配符*來(lái)設(shè)置各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁是0吃警。

2.塊屬性標(biāo)簽float后糕篇，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大

問(wèn)題癥狀:常見(jiàn)癥狀是IE6中后面的一塊被頂?shù)较乱恍?/p>

碰到頻率：90%（稍微復(fù)雜點(diǎn)的頁(yè)面都會(huì)碰到酌心，float布局最常見(jiàn)的瀏覽器兼容問(wèn)題）

解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性

備注：我們最常用的就是div+CSS布局了拌消，而div就是一個(gè)典型的塊屬性標(biāo)簽，橫向布局的時(shí)候我們通常都是用div float實(shí)現(xiàn)的安券，橫向的間距設(shè)置如果用margin實(shí)現(xiàn)墩崩，這就是一個(gè)必然會(huì)碰到的兼容性問(wèn)題。

3.設(shè)置較小高度標(biāo)簽（一般小于10px）侯勉，在IE6鹦筹，IE7，遨游中高度超出自己設(shè)置高度

問(wèn)題癥狀：IE6址貌、7和遨游里這個(gè)標(biāo)簽的高度不受控制铐拐，超出自己設(shè)置的高度

碰到頻率：60%

解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度徘键。

備注：這種情況一般出現(xiàn)在我們?cè)O(shè)置小圓角背景的標(biāo)簽里。出現(xiàn)這個(gè)問(wèn)題的原因是IE8之前的瀏覽器都會(huì)給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度遍蟋。即使你的標(biāo)簽是空的吹害，這個(gè)標(biāo)簽的高度還是會(huì)達(dá)到默認(rèn)的行高。

4.行內(nèi)屬性標(biāo)簽虚青，設(shè)置display:block后采用float布局它呀，又有橫行的margin的情況，IE6間距bug

問(wèn)題癥狀：IE6里的間距比超過(guò)設(shè)置的間距

碰到幾率：20%

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

備注：行內(nèi)屬性標(biāo)簽棒厘，為了設(shè)置寬高纵穿，我們需要設(shè)置display:block;(除了input標(biāo)簽比較特殊)。在用float布局并有橫向的margin后奢人，在IE6下谓媒，他就具有了塊屬性float后的橫向margin的bug。不過(guò)因?yàn)樗旧砭褪切袃?nèi)屬性標(biāo)簽达传，所以我們?cè)偌由蟙isplay:inline的話篙耗，它的高寬就不可設(shè)了。這時(shí)候我們還需要在display:inline后面加入display:talbe宪赶。

5.圖片默認(rèn)有間距

問(wèn)題癥狀：幾個(gè)img標(biāo)簽放在一起的時(shí)候宗弯，有些瀏覽器會(huì)有默認(rèn)的間距，加了問(wèn)題一中提到的通配符也不起作用搂妻。

碰到幾率：20%

解決方案：使用float屬性為img布局

備注：因?yàn)閕mg標(biāo)簽是行內(nèi)屬性標(biāo)簽蒙保，所以只要不超出容器寬度，img標(biāo)簽都會(huì)排在一行里欲主，但是部分瀏覽器的img標(biāo)簽之間會(huì)有個(gè)間距邓厕。去掉這個(gè)間距使用float是正道。（我的一個(gè)學(xué)生使用負(fù)margin扁瓢，雖然能解決详恼，但負(fù)margin本身就是容易引起瀏覽器兼容問(wèn)題的用法，所以我禁止他們使用）

6.標(biāo)簽最低高度設(shè)置min-height不兼容

問(wèn)題癥狀：因?yàn)閙in-height本身就是一個(gè)不兼容的CSS屬性引几，所以設(shè)置min-height時(shí)不能很好的被各個(gè)瀏覽器兼容

碰到幾率：5%

解決方案：如果我們要設(shè)置一個(gè)標(biāo)簽的最小高度200px昧互，需要進(jìn)行的設(shè)置為：

{min-height:200px; height:auto !important; height:200px; overflow:visible;}

備注：在B/S系統(tǒng)前端開(kāi)時(shí)，有很多情況下我們又這種需求伟桅。當(dāng)內(nèi)容小于一個(gè)值（如300px）時(shí)敞掘。容器的高度為300px；當(dāng)內(nèi)容高度大于這個(gè)值時(shí)楣铁，容器高度被撐高玖雁，而不是出現(xiàn)滾動(dòng)條。這時(shí)候我們就會(huì)面臨這個(gè)兼容性問(wèn)題盖腕。

7.透明度的兼容CSS設(shè)置

.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;  
}  

如果我們熟悉標(biāo)簽的默認(rèn)屬性的話赫冬，就能很好的理解為什么會(huì)出現(xiàn)兼容問(wèn)題以及怎么去解決這些兼容問(wèn)題浓镜。

◆IE6認(rèn)識(shí)的hacker 是下劃線_ 和星號(hào) *

◆IE7 遨游認(rèn)識(shí)的hacker是星號(hào) *

比如這樣一個(gè)CSS設(shè)置：

height:300px;*height:200px;_height:100px; 

IE6瀏覽器在讀到height:300px的時(shí)候會(huì)認(rèn)為高時(shí)300px；繼續(xù)往下讀劲厌，他也認(rèn)識(shí)heihgt竖哩， 所以當(dāng)IE6讀到height:200px的時(shí)候會(huì)覆蓋掉前一條的相沖突設(shè)置，認(rèn)為高度是200px脊僚。繼續(xù)往下讀，IE6還認(rèn)識(shí)_height,所以他又會(huì)覆蓋掉200px高的設(shè)置遵绰，把高度設(shè)置為100px辽幌；

IE7和遨游也是一樣的從高度300px的設(shè)置往下讀。當(dāng)它們讀到*height200px的時(shí)候就停下了椿访，因?yàn)樗鼈儾徽J(rèn)識(shí)_height乌企。所以它們會(huì)把高度解析為200px，剩下的瀏覽器只認(rèn)識(shí)第一個(gè)height:300px;所以他們會(huì)把高度解析為300px成玫。因?yàn)閮?yōu)先級(jí)相同且想沖突的屬性設(shè)置后一個(gè)會(huì)覆蓋掉前一個(gè)加酵，所以書(shū)寫(xiě)的次序是很重要的。

8.IE6雙邊距問(wèn)題:在 IE6中設(shè)置了float , 同時(shí)又設(shè)置margin , 就會(huì)出現(xiàn)邊距問(wèn)題
解決方案：設(shè)置display:inline;

9.當(dāng)標(biāo)簽的高度設(shè)置小于10px哭当，在IE6猪腕、IE7中會(huì)超出自己設(shè)置的高度
解決方案：超出高度的標(biāo)簽設(shè)置overflow:hidden,或者設(shè)置line-height的值小于你的設(shè)置高度

10.圖片默認(rèn)有間距
解決方案：使用float 為img 布局

11.IE9一下瀏覽器不能使用opacity
解決方案：

opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

12.邊距重疊問(wèn)題；當(dāng)相鄰兩個(gè)元素都設(shè)置了margin 邊距時(shí)钦勘，margin 將取最大值陋葡，舍棄最小值；
解決方案：為了不讓邊重疊彻采，可以給子元素增加一個(gè)父級(jí)元素腐缤，并設(shè)置父級(jí)元素為overflow:hidden；

13.cursor:hand 顯示手型在safari 上不支持
解決方案：統(tǒng)一使用 cursor:pointer

14.兩個(gè)塊級(jí)元素肛响，父元素設(shè)置了overflow:auto岭粤；子元素設(shè)置了position:relative ;且高度大于父元素，在IE6特笋、IE7會(huì)被隱藏而不是溢出剃浇；
解決方案：父級(jí)元素設(shè)置position:relative

15.IE6 背景閃爍的問(wèn)題

問(wèn)題：鏈接、按鈕用 CSSsprites 作為背景雹有，在 ie6 下會(huì)有背景圖閃爍的現(xiàn)象偿渡。原因是 IE6 沒(méi)有將背景圖緩存，每次觸發(fā) hover 的時(shí)候都會(huì)重新加載

解決：可以用 JavaScript 設(shè)置 ie6 緩存這些圖片：

document.execCommand("BackgroundImageCache", false, true);

16.解決在 IE6 下霸奕，列表與日期錯(cuò)位的問(wèn)題

日期<span> 標(biāo)簽放在標(biāo)題 <a> 標(biāo)簽之前即可

17.解決 IE6 不支持 min-height 屬性的問(wèn)題

min-height: 350px;
_height: 350px;

18.讓 IE7 IE8 支持 CSS3 background-size屬性

由于 background-size 是 CSS3 新增的屬性溜宽，所以 IE 低版本自然就不支持了，但是老外寫(xiě)了一個(gè) htc 文件质帅，名叫 background-size polyfill适揉，使用該文件能夠讓 IE7留攒、IE8 支持 background-size 屬性。其原理是創(chuàng)建一個(gè) img 元素插入到容器中嫉嘀，并重新計(jì)算寬度炼邀、高度、left剪侮、top 等值拭宁，模擬 background-size 的效果。

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-image: url('img/37.png');
  background-repeat: no-repeat;
  background-size: cover;
  -ms-behavior: url('css/backgroundsize.min.htc');
  behavior: url('css/backgroundsize.min.htc');
}

19.IE6-7 line-height 失效的問(wèn)題

問(wèn)題：在ie 中 img 與文字放一起時(shí)瓣俯，line-height 不起作用

解決：都設(shè)置成 float

width:100%

width:100% 這個(gè)東西在 ie 里用很方便杰标，會(huì)向上逐層搜索 width 值，忽視浮動(dòng)層的影響.

Firefox 下搜索至浮動(dòng)層結(jié)束彩匕，如此腔剂，只能給中間的所有浮動(dòng)層加 width:100%才行，累啊驼仪。

opera 這點(diǎn)倒學(xué)乖了掸犬，跟了 ie

cursor:hand

顯示手型 cursor: hand，ie6/7/8绪爸、opera 都支持湾碎，但是safari 、 ff 不支持

`cursor: pointer;` 

20.td 自動(dòng)換行的問(wèn)題

問(wèn)題：table 寬度固定奠货，td 自動(dòng)換行

解決：設(shè)置 Table 為 table-layout: fixed胜茧，td 為 word-wrap: break-word

21.讓層顯示在 FLASH 之上

想讓層的內(nèi)容顯示在 flash 上，把 FLASH 設(shè)置透明即可

1仇味、<param name=" wmode " value="transparent" />
2呻顽、<param name="wmode" value="opaque"/>`

22.鍵盤(pán)事件 keyCode 兼容性寫(xiě)法

var inp = document.getElementById('inp')
var result = document.getElementById('result')

function getKeyCode(e) {
  e = e ? e : (window.event ? window.event : "")
  return e.keyCode ? e.keyCode : e.which
}

inp.onkeypress = function(e) {
  result.innerHTML = getKeyCode(e)
}

23.求窗口大小的兼容寫(xiě)法

// 瀏覽器窗口可視區(qū)域大小（不包括工具欄和滾動(dòng)條等邊線）
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 網(wǎng)頁(yè)內(nèi)容實(shí)際寬高（包括工具欄和滾動(dòng)條等邊線）
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 網(wǎng)頁(yè)內(nèi)容實(shí)際寬高 (不包括工具欄和滾動(dòng)條等邊線）
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// 滾動(dòng)的高度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;

24.DOM 事件處理程序的兼容寫(xiě)法

var eventshiv = {
    // event兼容
    getEvent: function(event) {
        return event ? event : window.event;
    },

// <span class="hljs-built_in">type</span>兼容
getType: <span class="hljs-keyword">function</span>(event) { <span class="hljs-built_in">return</span> event.type;
},

// target兼容
getTarget: <span class="hljs-keyword">function</span>(event) { <span class="hljs-built_in">return</span> event.target ? event.target : event.srcelem;
},

// 添加事件句柄
addHandler: <span class="hljs-keyword">function</span>(elem, <span class="hljs-built_in">type</span>, listener) { <span class="hljs-keyword">if</span> (elem.addEventListener) {
        elem.addEventListener(<span class="hljs-built_in">type</span>, listener, <span class="hljs-literal">false</span>);
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (elem.attachEvent) {
        elem.attachEvent(<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>, listener);
    } <span class="hljs-keyword">else</span> {
        // 在這里由于.與<span class="hljs-string">'on'</span>字符串不能鏈接丹墨，只能用 []
        elem[<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>] = listener;
    }
},

// 移除事件句柄
removeHandler: <span class="hljs-keyword">function</span>(elem, <span class="hljs-built_in">type</span>, listener) { <span class="hljs-keyword">if</span> (elem.removeEventListener) {
        elem.removeEventListener(<span class="hljs-built_in">type</span>, listener, <span class="hljs-literal">false</span>);
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (elem.detachEvent) {
        elem.detachEvent(<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>, listener);
    } <span class="hljs-keyword">else</span> {
        elem[<span class="hljs-string">'on'</span> + <span class="hljs-built_in">type</span>] = null;
    }
},

// 添加事件代理
addAgent: <span class="hljs-keyword">function</span> (elem, <span class="hljs-built_in">type</span>, agent, listener) {
    elem.addEventListener(<span class="hljs-built_in">type</span>, <span class="hljs-keyword">function</span> (e) { <span class="hljs-keyword">if</span> (e.target.matches(agent)) {
            listener.call(e.target, e); // this 指向 e.target
        }
    });
},

// 取消默認(rèn)行為
preventDefault: <span class="hljs-keyword">function</span>(event) { <span class="hljs-keyword">if</span> (event.preventDefault) {
        event.preventDefault();
    } <span class="hljs-keyword">else</span> {
        event.returnValue = <span class="hljs-literal">false</span>;
    }
},

// 阻止事件冒泡
stopPropagation: <span class="hljs-keyword">function</span>(event) { <span class="hljs-keyword">if</span> (event.stopPropagation) {
        event.stopPropagation();
    } <span class="hljs-keyword">else</span> {
        event.cancelBubble = <span class="hljs-literal">true</span>;
    }
};