不同瀏覽器的內(nèi)核也不盡相同贴谎，所以各個(gè)瀏覽器對(duì)網(wǎng)頁的解析存在一定的差異汞扎。
瀏覽器內(nèi)核主要分為兩種，一是渲染引擎擅这，另一個(gè)是js 引擎澈魄，內(nèi)核更加傾向于說渲染引擎。
常見的瀏覽器內(nèi)核：
1.不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同
問題癥狀：隨便寫幾個(gè)標(biāo)簽仲翎，不加樣式控制的情況下痹扇，各自的margin 和padding差異較大铛漓。
碰到頻率:100%
解決方案：CSS里 *{margin:0;padding:0;}
備注：這個(gè)是最常見的也是最易解決的一個(gè)瀏覽器兼容性問題，幾乎所有的CSS文件開頭都會(huì)用通配符*來設(shè)置各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁是0鲫构。
2.塊屬性標(biāo)簽float后浓恶，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大
問題癥狀:常見癥狀是IE6中后面的一塊被頂?shù)较乱恍?/p>
碰到頻率：90%（稍微復(fù)雜點(diǎn)的頁面都會(huì)碰到结笨，float布局最常見的瀏覽器兼容問題）
解決方案：在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ì)碰到的兼容性問題。
3.設(shè)置較小高度標(biāo)簽（一般小于10px）赫模，在IE6塞耕，IE7，遨游中高度超出自己設(shè)置高度
問題癥狀：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è)問題的原因是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
問題癥狀：IE6里的間距比超過設(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癞揉。不過因?yàn)樗旧砭褪切袃?nèi)屬性標(biāo)簽纸肉，所以我們?cè)偌由蟙isplay:inline的話，它的高寬就不可設(shè)了喊熟。這時(shí)候我們還需要在display:inline后面加入display:talbe柏肪。
5.圖片默認(rèn)有間距
問題癥狀：幾個(gè)img標(biāo)簽放在一起的時(shí)候，有些瀏覽器會(huì)有默認(rè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本身就是容易引起瀏覽器兼容問題的用法案铺，所以我禁止他們使用）
6.標(biāo)簽最低高度設(shè)置min-height不兼容
問題癥狀：因?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)前端開時(shí)控汉，有很多情況下我們又這種需求笔诵。當(dāng)內(nèi)容小于一個(gè)值（如300px）時(shí)。容器的高度為300px姑子；當(dāng)內(nèi)容高度大于這個(gè)值時(shí)乎婿，容器高度被撐高，而不是出現(xiàn)滾動(dòng)條街佑。這時(shí)候我們就會(huì)面臨這個(gè)兼容性問題谢翎。
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)兼容問題以及怎么去解決這些兼容問題沐旨。
◆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è)诚啃，所以書寫的次序是很重要的。
8.IE6雙邊距問題:在 IE6中設(shè)置了float , 同時(shí)又設(shè)置margin , 就會(huì)出現(xià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.邊距重疊問題；當(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 背景閃爍的問題
問題：鏈接版确、按鈕用 CSSsprites 作為背景，在 ie6 下會(huì)有背景圖閃爍的現(xiàn)象乎折。原因是 IE6 沒有將背景圖緩存绒疗，每次觸發(fā) hover 的時(shí)候都會(huì)重新加載
解決：可以用 JavaScript 設(shè)置 ie6 緩存這些圖片：
document.execCommand("BackgroundImageCache", false, true);
16.解決在 IE6 下，列表與日期錯(cuò)位的問題
日期<span> 標(biāo)簽放在標(biāo)題 <a> 標(biāo)簽之前即可
17.解決 IE6 不支持 min-height 屬性的問題
min-height: 350px;
_height: 350px;
18.讓 IE7 IE8 支持 CSS3 background-size屬性
由于 background-size 是 CSS3 新增的屬性骂澄，所以 IE 低版本自然就不支持了吓蘑，但是老外寫了一個(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 失效的問題
問題：在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)換行的問題
問題：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"/>
2、<param name="wmode" value="opaque"/>` </pre>
22.鍵盤事件 keyCode 兼容性寫法
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.求窗口大小的兼容寫法
// 瀏覽器窗口可視區(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)頁內(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)頁內(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 事件處理程序的兼容寫法
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>;
}
};
