這次帶給大家web前端關於瀏覽器相容性問題的解決方案，web前端解決瀏覽器相容性問題的注意事項有哪些，以下就是實戰案例，一起來看一下。
所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同一段程式碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論使用者使用什麼瀏覽器來查看我們的網站或登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員常常會碰到、必須要解決的問題：
一、css3媒體查詢相容方案：Respond.js
GitHub網址：https://github.com/scottjehl/Respond
（源自網路）
IE8不支援CSS媒體查詢，對回應式設計大為不利。 Respond.js可協助IE6-8相容於「min/max-width」媒體查詢條件。
使用方法：在頁面中所有css檔案的參考位置之後引用Respond.js。而且Respond.js的引用得越早，用戶看到頁面閃爍的機會越小。
二、自訂屬性問題
問題說明：IE下，可以使用取得常規屬性的方法來取得自訂屬性，也可以使用getAttribute() 取得自訂屬性；Firefox下，只能使用getAttribute() 取得自訂屬性。
解決方法：統一透過 getAttribute() 取得自訂屬性。
三、變數名與HTML中id相同的問題
問題說明：IE下，HTML物件的ID可以作為document 的下屬物件變數名稱直接使用，Firefox下則不能；Firefox下，可以使用與HTML物件ID相同的變數名，IE下則不能。
解決方法：使用 document.getElementById(”idName”) 取代 document.idName。最好不要取HTML物件ID相同的變數名，以減少錯誤；在宣告變數時，一律加上var關鍵字，以避免歧義。
四、const問題
問題說明：Firefox下，可以使用const關鍵字或var關鍵字來定義常數；IE下，只能使用var關鍵字來定義常數。
解決方法：統一使用var關鍵字定義常數。 對於const是ES6中let之後的一個定義變數的方法，其要注意的一點就是在宣告變數的時候
一定要給其賦值，不然會報錯。
五、window.event問題
問題說明：window.event 只能在IE下運行，而不能在Firefox下運行，這是因為Firefox的event只能在事件發生的現場使用。
解決方法：在事件發生的函數上加上event參數，在函數體內(假設形參為evt)使用var myEvent = evt?evt:(window.event?window.event:null)
範例：
<input type="button" onclick="doSomething(event)"/>
<script language="javascript">
function doSomething(evt) {
var myEvent = evt?evt:(window.event?window.event:null)
...} 123456登入後複製
六、event.x與event.y的問題
7、取得滑鼠在頁面上的位置
IE下,event物件有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event物件有pageX,pageY屬性,但是沒有x,y屬性.
#解決方法：
使用mX(mX = event.x ? event.x : event.pageX;)來取代IE下的event.x或Firefox下的event.pageX.
七、frame問題
以下面的frame為例：
1.存取frame物件
IE：使用window.frameId或window.frameName來存取這個frame物件；
Firefox：使用window.frameName來存取這個frame物件；
解決方法：統一使用window .document.getElementById(”frameId”) 來存取這個frame物件；
2.切換frame內容
在IE和Firefox中都可以使用window.document.getElementById(”frameId”).src = “webjx. com.html」或window.frameName.location = “webjx.com.html”來切換frame的內容；
如果需要將frame中的參數傳回父窗口，可以在frame中使用parent關鍵字來存取父視窗。
八、body載入問題
問題說明：Firefox的body物件在body標籤沒有被瀏覽器完全讀入之前就存在；而IE的body物件則必須在body標籤被瀏覽器完全讀入之後才存在。
[註] 這個問題尚未實際驗證，待驗證後再來修改。
[註] 經驗證，IE6、Opera9以及FireFox2中不存在上述問題，單純的JS腳本可以存取在腳本之前已經載入的所有物件和元素，即使這個元素還沒有載入完成。
九、事件委託方法
Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较（习惯问题）：
window.onload = function(){
var oUl = document.getElementById("ul1");
oUl.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert(123);
alert(target.innerHTML);
}
}
}1234567891011登入後複製
十、访问的父元素的区别
问题说明：在IE下，使用 obj.parentElement 或 obj.parentNode 访问obj的父结点；在firefox下，使用 obj.parentNode 访问obj的父结点。
解决方法：因为firefox与IE都支持DOM，因此统一使用obj.parentNode 来访问obj的父结点。
十一、innerText的问题.
问题说明：innerText在IE中能正常工作，但是innerText在FireFox中却不行。
解决方法：在非IE浏览器中使用textContent代替innerText。
if(navigator.appName.indexOf("Explorer") >-1){
document.getElementById('element').innerText = "my text";
}
else{
document.getElementById('element').textContent = ";my text";
}123456登入後複製
十二、用setAttribute设置事件
var obj = document.getElementById('objId');
obj.setAttribute('onclick','funcitonname();');12
登入後複製
FIREFOX支持，IE不支持
解决办法：
IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数
var obj = document.getElementById('objId');
obj.onclick=function(){fucntionname();};12登入後複製
十三、设置类名
setAttribute(‘class’,’styleClass’)
FIREFOX支持，IE不支持(指定属性名为class，IE不会设置元素的class属性，相反只使用setAttribute时IE自动识CLASSNAME属性)
解决办法如下：
setAttribute('class','styleClass')
setAttribute('className','styleClass')
//或者直接
object.className='styleClass';123456
登入後複製
十四、绑定事件
在IE下我们通常使用attachEvent方法
var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function); btn1Obj.attachEvent("onclick",method1); btn1Obj.attachEvent("onclick",method2); btn1Obj.attachEvent("onclick",method3); 12345登入後複製
可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture); btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false); 12345登入後複製
顺变说一下这两个的使用方式：
addEventListener的使用方式
target.addEventListener(type,listener,useCapture);
登入後複製
target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，不含“on”如“click”、“mouseover”、“keydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture ：是否使用捕捉，一般用 false 。
例如：
document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 1登入後複製
2.对于attachEvent
target.attachEvent(type, listener);
登入後複製
target： 文档节点、document、window 或 XMLHttpRequest。
type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。
例如：
document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);}); 1登入後複製
但是他们都给出了事件的移除方法
removeEventListener(event,function,capture/bubble);
登入後複製
十五、ajax请求
对于ajax请求只要出现兼容性的方面就是创建对象时候的区别我们要考虑IE6的情况,下面给出代码
//设置IE6的情况，注意，在判断XMLHttpRequest是否存在时将其
//设置为window.XMLHttpRequest，这样将其设置为属性，在检测时就不是未定义
//而是undefine
//1.创建Ajax对象
if(window.XMLHttpRequest){ var oAjax=new XMLHttpRequest();
} else{ var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}登入後複製
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
前端页面测试的方法
javascript中call与apply的应用
以上是web前端關於瀏覽器相容性問題的解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！
