代碼兼容：IE7及以上，360，chrome，firefox，opera，搜狗
1. 什么是瀏覽器兼容問題：
由于不同瀏覽器的內(nèi)核不同，同一瀏覽器的不同版本對CSS的支持及解析結(jié)果不一樣，因此渲染的效果也不相同。
2. 需注意的問題
- 寫好標(biāo)準(zhǔn)頭： <!DOCTYPE html>
- 首先引入初始化css，保證消除不同瀏覽器默認(rèn)樣式
- PC端H5新標(biāo)簽盡量不用，比如header，footer，nav等
- 不使用css選擇器nth-of-type
- jquery只有1.x版本兼容ie678，目前官方只做bug維護(hù)，不再增加新功能，最終版本是jquery1.12.4
3. 解決方式
1). 讓低版本兼容h5標(biāo)簽引入html5shiv.js，讓低版本兼容媒體查詢引入respond.js
實(shí)現(xiàn)方式：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="scripts/respond/html5shiv.min.js"></script>
<script src="scripts/respond/respond.min.js"></script>
<![endif]-->
2). 讓低版本兼容css3的box-sizing標(biāo)簽引入boxsizing.htc
只需在css代碼box-sizing標(biāo)簽下邊引入文件的當(dāng)前路徑即可
box-sizing: border-box;
*behavior: url(./scripts/box-sizing-polyfill/boxsizing.htc);
3). 讓低版本ie8兼容border-radius標(biāo)簽引入ie-css3.htc
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
behavior: url(./scripts/ie-css3.htc/ie-css3.htc);
4). 低版本瀏覽器點(diǎn)擊事件不兼容處理方法，及addEventListener attachEvent解決IE 6 7 8 this指向錯誤問題
在IE678中，使用attachEvent或detachEvent后事件處事函數(shù)里this指向window對象，而addEventListener或removeEventListener中this指向事件對象元素
var oBtn = $(".groupTitle");
/*兼容寫法*/
EventListen = {
addEvent: function(str, fn, ele) {
if (ele.addEventListener) {
ele.addEventListener(str, fn); //火狐谷歌IE9+支持addEventListener
} else if (ele.attachEvent) {
ele.attachEvent("on" + str, fn); //IE678支持attachEvent
} else {
ele["on" + str] = fn;
}
}
};
for (var i = 0; i < oBtn.length; i++) {
EventListen.addEvent("click", funShow, oBtn[i]);
}
function funShow(e) {
//事件處理函數(shù)中this指window,使用事件源代替this關(guān)鍵字
e = e || window.event;
var _this = e.srcElement || e.target;
$(_this).next().slideToggle().parent("li").siblings("li").children("div").hide();
};
5). CSS hack方式
CSS hack簡單講是指各版本瀏覽器對CSS解析后出現(xiàn)網(wǎng)頁內(nèi)容誤差的處理。它通過在CSS樣式中加入一些特殊符號，讓不同瀏覽器識別不同符號（不同瀏覽器識別什么樣的符號是有標(biāo)準(zhǔn)的，CSS hack就是讓你記住這個標(biāo)準(zhǔn)），以達(dá)到應(yīng)用不同CSS樣式的目的。
從上圖可分析出以下幾種情況：
- 大部分特殊字符IE瀏覽器支持，其他主流瀏覽器firefox、chrome、opera、safari不支持(opera可識別除外)
- \9：所有IE瀏覽器都支持
- \0：IE8、IE9支持，opera部分支持
- \9\0：IE8部分支持、IE9支持
- \0\9：IE8、IE9支持
- *：IE6、IE7支持
- _和-：僅IE6支持
css Hack表現(xiàn)形式
(1).CSS屬性前綴法
- Trident內(nèi)核：主要代表為IE瀏覽器，前綴為-ms
- Gecko內(nèi)核：主要代表為Firefox，前綴為-moz
- Presto內(nèi)核：主要代表為Opera，前綴為-o
- Webkit內(nèi)核：產(chǎn)要代表為Chrome和Safari，前綴為-webkit
(2).選擇器前綴法
針對一些頁面表現(xiàn)不一致或需特殊對待的瀏覽器，在CSS選擇器前加一些只有某些特定瀏覽器才能識別的前綴進(jìn)行hack。
(3).IE條件注釋法
注：IE10+已不再支持注釋，這類hack不僅對css生效，對寫在判斷語句里的所有代碼都生效
各種css Hack情況介紹
(1).區(qū)別IE和非IE瀏覽器
.tip{
background:blue; //非IE背景藍(lán)色 因?yàn)樗袨g覽器都能解釋
background:red\9; //IE6789背景紅色，因?yàn)閈9在IE6789中可識別，覆蓋上面樣式 IE10跟11應(yīng)該不識別，IE11測試確定
}
(2).區(qū)別IE6、7、8、Firefox
.tip{
background:blue; //Firefox背景變藍(lán)色 所有瀏覽器都支持
background:red\9; // IE8背景變紅色 IE6、7、8、9支持覆蓋上面樣式
*background:black; // IE7背景變黑色 IE6、7支持又一次覆蓋上面樣式
_background:orange; //IE6背景變橘色 IE6支持又一次覆蓋上面樣式
}
【說明】：IE7可辨識「」和「!important」，但I(xiàn)E6只可辨識「」，至于Firefox可以讀取「!important」但不能辨識「*」因此可透過這樣的差異來有效區(qū)隔IE6、7、Firefox。
(3).區(qū)分IE6、7、8、9 (“:root”偽類IE只有IE9支持，其他主流瀏覽器均支持，opera部分支持**）
element{
color: #999\9\0; //IE9專用
color: #999\9; //IE6 7 8 9共用
color: #666\0; //IE8、9共用
*color: #999; //IE6、7共用
*+color: #999; //IE7專用
_color: #999; //IE6專用
}
：root element{ color: #666\9; } //IE9
建議：實(shí)際開發(fā)事先如果不是很清楚可以先寫布局代碼，寫一個階段用瀏覽器測試工具（常用工具推薦IETEST）測試各個版本瀏覽器的布局效果，如有問題針對有問題的瀏覽器單獨(dú)調(diào)試。
css Hack弊病
一般情況下，盡量避免使用CSS hack，但有些情況為顧及用戶體驗(yàn)實(shí)現(xiàn)向下兼容，不得已才使用hack。比如由于IE8及以下版本不支持CSS3，而我們的項(xiàng)目頁面使用大量CSS3新屬性。在IE9/Firefox/Chrome下正常渲染，這種情況下如果不使用css3pie或htc或條件注釋等方法，可能就得讓IE8-的專屬hack出馬了。使用hack雖然對頁面表現(xiàn)的一致性有好處，但過多的濫用會造成html文檔混亂不堪，增加管理和維護(hù)的負(fù)擔(dān)。
常見問題
-
背景透明問題
IE: filter: alpha(opacity=10); FF: -moz-opacity:0.10; .box{filter:alpha(opacity=50);-moz-opacity:0.5; opacity:0.5;} -
圖片默認(rèn)有間距
問題癥狀： 幾個img標(biāo)簽放一起時，有些瀏覽器會有默認(rèn)間距，加通配符也不起作用。 解決方案：使用float屬性為img布局 -
IE浮動 margin產(chǎn)生雙邊距
.box { float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會產(chǎn)生200px距離 display:inline; //使浮動忽略 } Margin不一致問題：
當(dāng)有多張圖片需排在一行時，通常使用“Float：Left”來實(shí)現(xiàn)，這樣一來，瀏覽器就存在兼容性問題。導(dǎo)致圖片與后面的內(nèi)容存在margin不一致問題。對此解決方法就是給圖片添加“Display：inline”項(xiàng)即可。
