1.前言
一，為什么會出現(xiàn)瀏覽器兼容問題。
不同瀏覽器的內(nèi)核不一樣，所以不同瀏覽器對代碼的解析會存在差異。導(dǎo)致渲染出來的頁面效果會存在差異.
常見的瀏覽器內(nèi)核可分為四種：Trident、Gecko、Blink、Webkit
IE瀏覽器? ? ? ? ? ? ? ? ? ? ? Blink內(nèi)核（俗稱IE內(nèi)核）
chrome瀏覽器（谷歌瀏覽器）? ? ? ? ? ? ?webkit內(nèi)核（現(xiàn)在是Blink內(nèi)核）
Firefxo瀏覽器 （火狐瀏覽器）? ? ? ? ? ? ? Gecko內(nèi)核（俗稱FireFxo內(nèi)核）
QQ瀏覽器? ? ? ? ? ? ? ? ? ? Trident內(nèi)核（兼容模式）+webKit內(nèi)核（高速模式）
獵豹瀏覽器? ? ? ? ? ? ? ? ? ?chrome+IE(雙內(nèi)核)
360瀏覽器? ? ? ? ? ? ? ? ? ? chrome+IE（雙內(nèi)核）
百度? ? ? ? ? ? ? ? ? ? ? ? ? ? ? IE內(nèi)核
opera瀏覽器? ? ? ? ? ? ? ? ??最初是自己的Presto內(nèi)核，后來加入谷歌大軍，從Webkit又到了Blink內(nèi)核
二常見的瀏覽器兼容性問題及解決方案
常見的兼容性問題可分為三類
1.Html兼容
2.CSS兼容
3.javascript兼容
HTML部分
A，對應(yīng)Html兼容，主要是一些低版本的瀏覽器不能識別高版本瀏覽器使用的一些標(biāo)簽,從而導(dǎo)致不能解析，比如html5新增的一些標(biāo)簽。
解決辦法：可以用htmlshim框架可以讓低于IE9的瀏覽器支持HTML5
B，img的alt屬性 在沒有圖片的情況下各瀏覽器的解析不一致。
1.IE瀏覽器只顯示alt文字，谷歌瀏覽器一張破損的圖片加alt文字，360瀏覽器一張破損的圖片加alt文字，火狐瀏覽器只顯示alt文字。默認(rèn)給一張默認(rèn)圖片。
css部分
A,不同瀏覽器標(biāo)簽的marign和padding不同。
解決方案：在css代碼里添加如下代碼：
*{
? ? ?margin:0;
? ? ?padding:0;
}
B,IE6下marign雙倍邊距的問題
問題表現(xiàn)，元素浮動之后，margin值變雙倍。
解決方案：
{
display:block
}
C，IE6下img下面有間距
解決方案：設(shè)置display:block;
D,標(biāo)簽min-height的問題
問題表現(xiàn)：min-height本身就是一個不兼容CSS的屬于，所以min-height不能很好的沒各個瀏覽器解析。
解決方案：{
min-height:200px;
height:auto!important;
height:200px;
overflow:visible;
}
E,opacity多瀏覽器透明度問題，
問題表現(xiàn)opacity是css3的屬性，部分瀏覽器能夠解析
解決方法：使用各個瀏覽器的私有屬性以支持opacity
{
filter:alpha(opacity=50);/*IE*/
-moz-opacity:0.5;/*老版Mozilla*/
-khtml-opacity:0.5;/*老版Safari*/
opacity:0.5;
}
JS部分
