代碼兼容：IE7及以上，360璃弄，chrome要销，firefox，opera夏块，搜狗
1. 什么是瀏覽器兼容問(wèn)題：
由于不同瀏覽器的內(nèi)核不同疏咐，同一瀏覽器的不同版本對(duì)CSS的支持及解析結(jié)果不一樣，因此渲染的效果也不相同脐供。
2. 需注意的問(wèn)題
- 寫(xiě)好標(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指向錯(cuò)誤問(wèn)題
在IE678中糊昙，使用attachEvent或detachEvent后事件處事函數(shù)里this指向window對(duì)象，而addEventListener或removeEventListener中this指向事件對(duì)象元素
var oBtn = $(".groupTitle");
/*兼容寫(xiě)法*/
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簡(jiǎn)單講是指各版本瀏覽器對(duì)CSS解析后出現(xiàn)網(wǎng)頁(yè)內(nèi)容誤差的處理谢谦。它通過(guò)在CSS樣式中加入一些特殊符號(hào)释牺，讓不同瀏覽器識(shí)別不同符號(hào)（不同瀏覽器識(shí)別什么樣的符號(hào)是有標(biāo)準(zhǔn)的萝衩，CSS hack就是讓你記住這個(gè)標(biāo)準(zhǔn)），以達(dá)到應(yīng)用不同CSS樣式的目的船侧。
從上圖可分析出以下幾種情況：
- 大部分特殊字符IE瀏覽器支持，其他主流瀏覽器firefox厅各、chrome镜撩、opera、safari不支持(opera可識(shí)別除外)
- \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).選擇器前綴法
針對(duì)一些頁(yè)面表現(xiàn)不一致或需特殊對(duì)待的瀏覽器焰情，在CSS選擇器前加一些只有某些特定瀏覽器才能識(shí)別的前綴進(jìn)行hack陌凳。
(3).IE條件注釋法
注：IE10+已不再支持注釋，這類hack不僅對(duì)css生效内舟，對(duì)寫(xiě)在判斷語(yǔ)句里的所有代碼都生效
各種css Hack情況介紹
(1).區(qū)別IE和非IE瀏覽器
.tip{
background:blue; //非IE背景藍(lán)色 因?yàn)樗袨g覽器都能解釋
background:red\9; //IE6789背景紅色合敦，因?yàn)閈9在IE6789中可識(shí)別，覆蓋上面樣式 IE10跟11應(yīng)該不識(shí)別验游，IE11測(cè)試確定
}
(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支持又一次覆蓋上面樣式
}
【說(shuō)明】：IE7可辨識(shí)「」和「!important」，但I(xiàn)E6只可辨識(shí)「」爪膊，至于Firefox可以讀取「!important」但不能辨識(shí)「*」因此可透過(guò)這樣的差異來(lái)有效區(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í)際開(kāi)發(fā)事先如果不是很清楚可以先寫(xiě)布局代碼嘹朗，寫(xiě)一個(gè)階段用瀏覽器測(cè)試工具（常用工具推薦IETEST）測(cè)試各個(gè)版本瀏覽器的布局效果，如有問(wèn)題針對(duì)有問(wèn)題的瀏覽器單獨(dú)調(diào)試诵肛。
css Hack弊病
一般情況下屹培，盡量避免使用CSS hack，但有些情況為顧及用戶體驗(yàn)實(shí)現(xiàn)向下兼容怔檩，不得已才使用hack褪秀。比如由于IE8及以下版本不支持CSS3，而我們的項(xiàng)目頁(yè)面使用大量CSS3新屬性薛训。在IE9/Firefox/Chrome下正常渲染媒吗，這種情況下如果不使用css3pie或htc或條件注釋等方法，可能就得讓IE8-的專屬hack出馬了乙埃。使用hack雖然對(duì)頁(yè)面表現(xiàn)的一致性有好處闸英，但過(guò)多的濫用會(huì)造成html文檔混亂不堪，增加管理和維護(hù)的負(fù)擔(dān)介袜。
常見(jiàn)問(wèn)題
-
背景透明問(wè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)有間距
問(wèn)題癥狀： 幾個(gè)img標(biāo)簽放一起時(shí)自阱，有些瀏覽器會(huì)有默認(rèn)間距，加通配符也不起作用米酬。 解決方案：使用float屬性為img布局 -
IE浮動(dòng) margin產(chǎn)生雙邊距
.box { float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會(huì)產(chǎn)生200px距離 display:inline; //使浮動(dòng)忽略 } Margin不一致問(wèn)題：
當(dāng)有多張圖片需排在一行時(shí)沛豌，通常使用“Float：Left”來(lái)實(shí)現(xiàn)，這樣一來(lái)赃额，瀏覽器就存在兼容性問(wèn)題加派。導(dǎo)致圖片與后面的內(nèi)容存在margin不一致問(wèn)題。對(duì)此解決方法就是給圖片添加“Display：inline”項(xiàng)即可跳芳。
