web前端瀏覽器兼容難題及解決方法是什么

web前端瀏覽器兼容難題及解決方法是什么，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

在前端面試題中，最常見的就是遇到瀏覽器兼容的問題。比如面試題常常會這樣問：工作中你都兼容哪些瀏覽器 ？ 實際開發中你都遇到過哪些兼容問題 ？下面小編就來為大家提供前端瀏覽器兼容難題的解決方法。

所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論用戶用什么瀏覽器來查看我們的網站或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的兼容性問題是前端開發人員經常會碰到和必須要解決的問題。當然啦關于瀏覽器兼容的這個問題太籠統了 所以當面試官問這個問題的時候，大家可以問一下面試官是指的是哪方面。

一、CSS里的兼容性問題　：

Input 的按鈕在 ios 和 Android 中的樣式兼容問題

ios 有默認的渲染 方式 漸變和圓角而且他的行高并不會隨著內容的增加。

解決方法：

在標簽上增加

-webkie-appearance：none； Height：4rem；

滾動穿透的問題:

滾動穿透是指在移動端當有 flxed 遮罩和彈出層的時候，屏幕上的滑動能夠滑動背景下的內容。

最后的解決方法

body.modal-open{

postion:flxed;

width:100%;

二、js里面的兼容性問題

1.const問題

說明:Firefox下,可以使用const關鍵字或var關鍵字來定義常量;

IE下,只能使用var關鍵字來定義常量。

解決方法：統一使用var關鍵字來定義常量。

2.event.srcElement問題

說明：IE下，event對象有srcElement屬性，但是沒有target屬性；Firefox下，even對象有target屬性，但是沒

有srcElement屬性。

解決方法：使用srcObj =event.srcElement ?event.srcElement : event.target;

3.事件綁定

IE：dom.attachEvent();

其他瀏覽器：dom.addEventListener();

標準瀏覽器采用事件捕獲的方式對應IE的事件冒泡機制（即標準由最外元素至最內元素或者IE由最內元素到最外元素）最后標準方亦覺得IE這方面的比較合理，所以便將事件冒泡納入了標準，這也是addEventListener第三個參數的由來，而且事件冒泡作為了默認值。

4.ajax略有不同

IE:ActiveXObject

其他：xmlHttpReuest

關于web前端瀏覽器兼容難題及解決方法是什么問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。