瀏覽器兼容性問題解決方式

時間 2019-11-20

原文原文鏈接

下面內容參考與dandanzmc文章。

什麼是瀏覽器兼容問題？

所謂的瀏覽器兼容性問題，是指因爲不一樣的瀏覽器對同一段代碼有不一樣的解析，形成頁面顯示效果不統一的狀況。css

在大多數狀況下。咱們的需求是，無論用戶用什麼瀏覽器來查看咱們的站點或者登錄咱們的系統，都應該是統一的顯示效果。因此瀏覽器的兼容性問題是前端開發者經常會碰到和必須要解決的問題。html

爲何會出現瀏覽器兼容問題？

瀏覽器兼容問題的出現，是因爲各個瀏覽器對W3C標準支持的程度不一樣而致使的。假設網頁都是一個標準的話。也不會又這樣的問題，但微軟把本身當成了標準。不遵循網頁的規範，因此一些網頁即便語法錯誤也會在IE正常顯示，而在FF，谷歌瀏覽器等不一樣內核的瀏覽器中出現「兼容問題」，事實上是網頁不遵循Web標準。前端

當前主瀏覽器的核心是什麼？

1) Trident：IE瀏覽器使用的內核,該內核程序在1997年的IE4中首次被採用，是微軟在Mosaic代碼的基礎之上改動而來的，並沿用到眼下的IE7。瀏覽器

Trident其實是一款開放的內核。其接口內核設計的至關成熟，所以纔有不少採用IE內核而非IE的瀏覽器涌現（如 Maxthon、TheWorld 、TT、GreenBrowser、AvantBrowser等）。安全

2) Geckos： Netcape6開始採用的內核，後來的FF也採用了該內核，Geckos的特色是代碼全然公開，所以，其可開發程度很是高。全世界的程序猿都可以爲其編寫代碼。添加功能。框架

3) Presto：眼下Opera採用的內核，該內核在2003年的Opera7中首次被使用。該款引擎的特色就是渲染速度的優化達到了極致。也是眼下公認網頁瀏覽速度最快的瀏覽器內核，然而代價是犧牲了網頁的兼容性。ide

4) Webkit：Safari瀏覽器使用的內核。優化

Google的Chrome瀏覽器也是採用Webkit。this

Webkit引擎包括WebCore排版引擎及JavaScriptCore解析引擎。均是從KDE的KHTML及KJS引擎衍生而來，它們都是自由軟件。在GPL條約下受權，同一時候支持BSD系統的開發。spa

因此Webkit也是自由軟件，同一時候開放源碼。在安全方面不受IE、Firefox的制約，因此Safari瀏覽器仍是比較安全的瀏覽器。

我整理的一些實例。都是在谷歌、IE七、IE八、IE九、IE十、FF中測試過。

實例：

1) 隱藏瀏覽器的滾動欄

問題：

隱藏瀏覽器的滾動欄

解決：

1) 僅僅有ie7支持<bodyscroll="no">

2) 除ie7不支持body{overflow:hidden}

3) 所有瀏覽器html{overflow:hidden}

實例：

1) 僅僅有ie7支持<body scroll="no">

[html] view plain copy

<body scroll="no" ></body>

2) 除ie7不支持 body{overflow:hidden}

[html] view plain copy

<body style="overflow:hidden" ></body>

3) 所有瀏覽器 html{overflow:hidden}

[html] view plain copy

<body style="overflow:hidden" ></body>

2) 禁用中文輸入法的問題

問題：

不能在輸入框中輸入漢字

解決：

用ime-mode:disabled，僅僅在ie系列和ff中有效。谷歌中，還沒有找到方法

實例：

[html] view plain copy

body{text-align:center;width:900px;position: relative;margin:0 auto;padding:0;}
#text{
background-position: center center; background-repeat: no-repeat;width:600px;height:400px;ime-mode:Disabled;
}

[html] view plain copy

<body>
<div style="margin-top:50px;">
<textarea type="text" id="text" onfocus="if(this.value=='切換輸入法，在此輸入中文試試...')this.value=''" title="試試">切換輸入法，在此輸入中文試試...</textarea>
</div><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁</center>
</body>

3) 禁用粘貼的問題

問題：

不能將內容拷貝到輸入框中

解決：

onpaste="returnfalse"。瀏覽器通用

實例：

[html] view plain copy

body{text-align:center;width:900px;position: relative;margin:0 auto;padding:0;}
#text{
background-position: center center; background-repeat: no-repeat;width:600px;height:400px;ime-mode:Disabled;
}

[html] view plain copy

<body>
<div style="margin-top:50px;">
<textarea type="text" id="text" onpaste="return false" onfocus="if(this.value=='在此粘貼試試...')this.value=''" title="試試">在此粘貼試試...</textarea>
</div><br /><center>如不能顯示效果，請按Ctrl+F5刷新本頁</center>
</body>