什么是瀏覽器的兼容問題
? ? ? ?瀏覽器的兼容性問題也就是網(wǎng)頁的兼容性或者網(wǎng)站兼容性問題, 指網(wǎng)頁在各種瀏覽器上的css表現(xiàn)形式不同而產(chǎn)生的瀏覽器和網(wǎng)頁間的兼容問題. 又或者不同瀏覽器對(duì)javaScript腳本中的一些方法的識(shí)別不同.
? ? ? ?兼容問題最多的是IE低版本瀏覽器, windows_XP系統(tǒng)的瀏覽器版本是IE6-8, window7支持IE9-11, 一般做到兼容IE6
? ? ? ?瀏覽器兼容的幾個(gè)方面: ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1.html 以及 css樣式 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.H5, CSS3新特性
? ? ? 3.js腳本一些方法的支持
CSS樣式的兼容
CSS樣式的兼容是前端工作中不可避免并且相當(dāng)復(fù)雜的一項(xiàng)內(nèi)容。
當(dāng)代瀏覽器都支持 CSS ，但是由于不同的瀏覽器對(duì)CSS解釋不同，不同的瀏覽器的默認(rèn)值表現(xiàn)的差別：
IE默認(rèn)margin
FF默認(rèn)padding
導(dǎo)致在不同瀏覽器中打開我們做好的頁面時(shí)非竿，會(huì)顯示混亂畴蒲。
常見的兼容問題:
1.IE瀏覽器給圖片加超鏈接時(shí),圖片會(huì)自動(dòng)加上邊框(紫色兩像素的邊框)
? ? 解決方案：img{border:none/0}
2.不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外邊距和內(nèi)田沖不同
? ? 問題癥狀：隨便寫幾個(gè)標(biāo)簽界斜，不加樣式控制的情況下慷彤，各自的margin 和padding差異較大。
? ? 解決方案：*{margin:0;padding:0;}
3.IE6浮動(dòng)元素橫向margin加倍（產(chǎn)生因素：一個(gè)塊元素虑粥、float：left、margin-left：5px時(shí) 宪哩，顯? ? ? 示的margin為10px娩贷；行內(nèi)元素沒有上下外邊距，有左右外邊距锁孟。）
? ? 解決方案：display：inline彬祖；使浮動(dòng)忽略IE下再解析為5px
4.margin:0 auto,對(duì)IE6不起作用
? ? 解決方案：給body{text-align:center}
5.經(jīng)典3像素bug：IE6瀏覽器茁瘦，浮動(dòng)塊元素與未浮動(dòng)塊元素處于同一行，有默認(rèn)的3px間距储笑。
? ? 解決方案：設(shè)置非浮動(dòng)元素浮動(dòng)
6.高度自適應(yīng)問題（最小高度）IE6不認(rèn)識(shí)min-height甜熔，IE6里的內(nèi)容會(huì)自動(dòng)撐開
? ? 解決方案：div { height:auto!important; height:200px; min-height:200px; }
7.opacity 定義元素的透明度
? ? 解決方案：filter：alpha（opacity=80）；/*ie支持該屬性*/
? ? ? ? ? ? ? ? ? ? ? opacity：0.8突倍；/*支持css3的瀏覽器*/
8.游標(biāo)手指cursor
? ? 解決方案：cursor: pointer 可以同時(shí)在 IE Chrome 等中顯示游標(biāo)手指狀腔稀， hand 僅 IE 可以
IE9以下版本瀏覽器兼容HTML5的方法
使用菜鳥的靜態(tài)資源html5shiv包
使用條件注釋法引入包
<!--[if It IE 9]>
? ? ? <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js ">
? ? ? </script>
<![end if]-->
并且在樣式表中初始化新標(biāo)簽的CSS：
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
css3是最新的css 標(biāo)準(zhǔn). w3c的css3規(guī)范仍在開發(fā). 但是, 許多新的css屬性已經(jīng)在現(xiàn)代瀏覽器使用
IE只有在版本9 及以上支持
js腳本兼容
1、事件對(duì)象
任何一個(gè)對(duì)象只要觸發(fā)了事件羽历，都傳一個(gè)參數(shù)（event）;
event對(duì)象
IE:默認(rèn)參數(shù)? window.event
非IE：必須傳遞一個(gè)參數(shù)
兼容方法：
IE瀏覽器下焊虏，只要訪問全局對(duì)象window的event屬性即可，忽略該參數(shù)秕磷，用window.event來讀取該event诵闭。
obj.onclick = function(e){? e = e || window.event
}
2、事件對(duì)象中的屬性
IE下澎嚣，even對(duì)象有x,y屬性涂圆，但是沒有pageX,pageY屬性；
非IE下,event對(duì)象有pageX,pageY屬性币叹，但是沒有x,y屬性
兼容方法：
使用條件注釋法：<!--[if IE]>...event.x...<![end if]-->
缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)润歉。
或者：var x = (event.x ? event.x : event.pageX)
3、innerHTML颈抚、innerText踩衩、textContent
IE支持innerHTML、innerText贩汉，不支持textContent屬性
其他瀏覽器三種屬性都支持
4驱富、DOM2級(jí)事件綁定
js的事件綁定方法中，IE9以下(不包括9)只支持attachEvent,而FF和Chrome只支持addEventListener匹舞，所以就必須為這兩個(gè)方法做兼容處理褐鸥，原理是先判斷attachEvent只否為真（存在），如果為真則用attachEvent（）方法赐稽，否則的話就用addEventListener（）叫榕。
同樣的，事件移除方法也有對(duì)應(yīng)的支持：
IE9以下(不包括9)只支持detachEvent,而FF和Chrome只支持removeEventListener
把這個(gè)兼容寫法封裝成一個(gè)函數(shù)
function myAddEvent(obj,ev,fn) {
//obj為要綁定事件的元素姊舵，ev為要綁定的事件晰绎，fn為綁定事件的函數(shù)
? ? if(obj.attachEvent){
? ? ? ? ?obj.attachEvent("on" + ev,fn);
? ? ?}else {
? ? ? ? ?obj.addEventListener(ev,fn,false);
? ? ?}
}
7、獲取頁面內(nèi)所有元素的一個(gè)集合
IE：documen.all
非IE：document.getElementsByTagName("*")
documen.all
8括丁、獲取對(duì)象的可視化區(qū)域的寬和高荞下，滾動(dòng)條距離頂端的距離
var w = document.body.clientWidth || document.documentElement.clientWidth;
var t = document.body.scrollTop || document.documentElement.scrollTop;
