前端界面兼容性問題和解決辦法

時間 2019-11-13

標籤前端界面兼容性問題解決辦法简体版

原文原文鏈接

今天的兼容性問題主要發生在「前端三毒」身上，它們分別是：javascript

IE 6
IE 7
IE 8

2.問題一：寬度計算問題

案例代碼：css

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #box{ width: 400px; } .left{ width: 200px; background: red; height: 300px; float: left; } .right{ width: 200px; float: right; } .div{ width: 180px; height: 180px; padding: 15px; background: blue; } </style> </head> <body> <div id="box"> <div class="left"></div> <div class="right"> <div class="div"></div> </div> </div> </body> </html>

上面的這段代碼在標準瀏覽器中的顯示狀況以下：html

而在 IE 低版本瀏覽器中是一個什麼樣子呢？前端

我勒個去，什麼狀況？java

這實際上是由於，在 IE 6 下，子級的寬度會撐開父級設置好的寬度。瀏覽器

而解決方法也很是簡單，將 **子級元素的寬度設置爲小於等於父級元素的寬度 **就能夠了。工具

除此以外，也推薦你們在盒模型的計算必定要準確，不然在 IE 下回出現問題。ui

3. 浮動時的兼容性問題（一）

在前端兼容性中，浮動這裏也是兼容性的一個重災區，例以下面的示例代碼。url

案例代碼：spa

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 400px; } .left{ background: red; float: left; } .right{ background: blue; float: right; } h3{ margin: 0; height: 40px; } </style> </head> <body> <div id="box"> <div class="left"> <h3>左側</h3> </div> <div class="right"> <h3>右側</h3> </div> </div> </body> </html>

在標準瀏覽器中沒有任何問題。

而在低版本瀏覽器中是什麼樣子呢？

這又是由於什麼呢？

在 IE 6 中，元素浮動中，若是元素須要寬度進行撐開，須要給裏面的塊元素都添加浮動才能夠。

那麼解決方案也很是簡單，咱們只須要給他們的內容也進行浮動就能夠。

4. 浮動時的兼容性問題（二）

除了上面的問題，咱們再來看一個問題。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .left{ width: 100px; height: 100px; background: red; float: left; } .right{ width: 200px; height: 100px; background: blue; margin-left: 100px; } </style> </head> <body> <div id="box"> <div class="left"></div> <div class="right"></div> </div> </body> </html>

標準瀏覽器中：

妥妥的沒任何問題，可是當在 IE 低版本中運行呢？

發現了麼？中間多出來了一個間隙（3px）。

這是由於，在 IE 6/7 下，元素要經過浮動排在同一排，就須要給這行元素都加浮動。

因此咱們怎麼辦？

該怎麼實現仍是要怎麼實現，別想着偷懶。

5.IE 低版本中的最小高度問題

案例代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ height: 2px; background: red; } </style> </head> <body> <div></div> </body> </html>

標準瀏覽器中顯示正常：

而在 IE 6 下，你會發現一個問題。

WTF? 我明明設置的是 2px ，爲何出來這麼粗一根？

這實際上是由於，在 IE 6 下元素的高度若是小於 19px 的時候，會被當作 19px 處理。

那麼咱們怎麼解決？

其實很是簡單，直接經過 overflow: hidden; 就能夠解決。

6. IE 中的邊框

案例代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 100px; height: 100px; border: 1px dotted red; } </style> </head> <body> <div></div> </body> </html>

在標準瀏覽器中：

而 IE 6 下是一個什麼樣子呢？？

驚了，這是怎麼回事？

要知道，在 IE 6 下不支持 1px 的 dotted 邊框樣式。

那假如美工大爺非要用這個樣式呢？

咱們其實能夠經過背景平鋪去解決，這裏就不去演示了，你們確定都會，對吧。

7. margin 的問題

案例代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ background: red; border: 1px solid red; zoom:1; } .div{ width: 100px; height: 100px; background: blue; margin: 100px; } </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html>

你們都知道，子級的第一個元素的 margin-top 會直接傳遞給父級，對吧。

而咱們其實也能夠經過設置一個 border 去解決這個問題。

這時候在上面的 margin 就能夠生效了。

可是，問題來了，你猜在 IE 低版本中是什麼樣子呢？

緣由：在 IE 下，父級有邊框的時候，子級的 margin 會失效。

爲何會出現這種狀況呢？

這實際上是在 IE 6/7/8 中才存在的一個屬性，hasLayout。

在 IE 下的大部分兼容性問題都是由於 hasLayout 屬性觸發的問題，儘可能觸發 hasLayout 能夠減小 IE 的問題。

至於觸發 hasLayout 的方法有很是多，但比較經常使用的就是 zoom: 1;，有興趣的小夥伴能夠本身嘗試一下。

8.IE 中雙邊距的 BUG

案例代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ margin: 0; } .box{ width: 200px; height: 200px; background: red; float: left; margin: 100px; } </style> </head> <body> <div class="box"></div> </body> </html>

上述這段代碼，在標準瀏覽器中，呈現的模樣：

而在低版本瀏覽器中，呈現的樣式則徹底不一樣。

這個也就是 IE 6 下很是著名的雙倍邊距 BUG。

這個 BUG 的出現原理是，在 IE 6 下，塊元素有浮動而且橫向的時候有 margin 的時候，橫向的 margin 會擴大兩倍。

那知道緣由以後，解決起來也就很是簡單了。

既然塊元素會出現這個問題，那咱們就將其轉換爲內聯元素。

這樣就不會產生這個問題了。

9.margin 的雙邊距效果

案例代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ border: 10px solid red; float: left; } .box div{ width: 100px; height: 100px; background: red; margin-left: 30px; border: 5px solid #000; float: left; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html>

這段代碼若是放在標準瀏覽器中，顯示的妥妥的沒問題。

可是若是放在低版本瀏覽器中是個什麼樣子呢？？

你會發現，margin-left 一行中最左側的第一個元素有雙邊距，而若是換成margin-right 的話，margin-right 一行中最右側的第一個元素有雙邊距。

這個問題的解決方案和上面的那個案例相同，咱們能夠直接將其轉換成 內聯元素，這樣的話，這個問題就能夠直接解決了。

10.li 的浮動間隙問題

案例代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul{ margin:0; padding: 0; list-style: none; width: 300px; } li{ list-style: none; height: 30px; border: 1px solid #000; } a{ width: 100px; height: 30px; float: left; background: red; } span{ width: 100px; height: 30px; float: right; background: blue; } </style> </head> <body> <ul> <li> <a href="javascript:void(0)"></a> <span></span> </li> <li> <a href="javascript:void(0)"></a> <span></span> </li> <li> <a href="javascript:void(0)"></a> <span></span> </li> </ul> </body> </html>

上面的代碼在標準瀏覽器中是怎麼顯示的呢？

和我們預料的是相同的，對吧。

可是，大家猜猜在 IE 6 和 IE 7 中是怎麼顯示的呢？？

在 IE 6/7 下，li 自己沒有浮動，li 裏面的內容有浮動，li 下會產生一個間隙。

那麼這個問題該如何解決呢?

這裏給你們推薦兩個解決方案。

給 li 也添加浮動
給 li 添加 vertical-align

先來看看給 li 添加浮動的作法。

可是注意一個問題，這樣在 IE 下確實可以解決這個問題，可是相應的，在標準瀏覽器中，中間的白色塊會消失。

因此，咱們推薦使用第二種作法，就是去添加 vertical-align。

你們還記得我在以前寫的一篇文章，專門說 img 標籤在下面有一條白色間隙的文章麼？

如何解決 img 標籤上下出現的間隙

這個問題的解決方案一樣也是須要修改 vertical-align 的屬性，將默認的 baseline 修改成其餘內容。

11. 當最小高度和 li 問題一塊兒發生的時候

基於上面的 li 問題，若是咱們同時觸發最小高度和 li 的問題的時候，該怎麼辦呢？

案例代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul{ margin:0; padding: 0; list-style: none; width: 300px; } li{ list-style: none; height: 12px; border: 1px solid #000; } a{ width: 100px; height: 12px; float: left; background: red; } span{ width: 100px; height: 12px; float: right; background: blue; } </style> </head> <body> <ul> <li> <a href="javascript:void(0)"></a> <span></span> </li> <li> <a href="javascript:void(0)"></a> <span></span> </li> <li> <a href="javascript:void(0)"></a> <span></span> </li> </ul> </body> </html>

標準瀏覽器中的樣式：

而在低版本瀏覽器中呢？

這時候確定有不少小夥伴開始動腦筋了，既然兩個問題在一塊兒，那我就直接將兩個問題的解決代碼一塊兒加上唄。

這時候，你會發現，最小高度的問題確實解決了，可是間隙仍是存在呀？

這時候就是我要給你們提示的一個問題，在 IE 6 下，最小高度的 BUG 和 li 的間隙問題共存的時候，使用 vertical-align 是無效的。

咱們必需要使用 float : left;。

12.前端三毒中最恐怖的一毒

案例代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ border: 10px solid red; } .box div{ width: 100px; height: 100px; background: blue; border: 5px solid #000; margin: 20px; float: left; display: inline; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html>

鑑於這個問題很是「恐怖」，咱們一點點的來分析。

首先我們先來看看，初始狀態如今是什麼樣子？

標準瀏覽器：

IE 低版本：

並且，咱們發現不只僅在下方的 margin 失效了，而且發如今前面還存在一個雙邊距的現象。

那咱們怎麼辦呢？

咱們能夠去添加一個寬度。

這時候在 IE 瀏覽器下顯示正常了。

可是相對的，在標準瀏覽器中會失效。

這時候怎麼辦呢？

咱們能夠去添加一個 overflow。

這時候，顯示確實正常了。

注意：前方高能！！！

當咱們將寬度一像素，一像素的增長的時候。

當你增長到 3px 的時候（做者這裏增長到 5px 才觸發這個現象，應該是模擬器不許確），會忽然發現，底部的 margin 又失效了。

並且還存在另一個很是詭異的現象。

咱們首先將剛纔的代碼作一下修改。

這時候顯示是正常的。

可是當咱們註釋某一個 div 的時候（刪除也能夠），剛纔的現象又發生了。

（做者這裏註釋了兩個，爲你們演示一下，註釋一個也是相同的。）

實際上，這實際上是由於當一行子級元素寬度之和和父級的寬度相差超過 3px，或者子級元素不滿行的狀況時，最後一行的子級元素的 margin-bottom 會失效。

這個問題無法解決，只可以避免。

這點必定要注意。

13.文字溢出 BUG

案例代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 400px; } .left{ float: left; } .right{ float: right; width: 400px; } </style> </head> <body> <div class="box"> <div class="left"></div> <span></span> <div class="right">李先生真帥</div> </div> </body> </html>

這個 BUG 是怎麼回事呢？

運行上面的代碼，在正常瀏覽器內顯示沒有任何問題。

可是須要注意，若是在 IE 6裏面，你會發現一個奇怪的現象。

咱們下面怎麼多了一個「帥」字呀？

若是你在下面多加一個 span 標籤呢？

兩個 span：

三個 span：

四個 span：

咱們會發現，甚至於咱們的第一行文字直接所有消失了。

這個就是 IE 6 下的文字溢出 BUG.

子元素的寬度和父級的寬度若是相差小於 3px 的時候，兩個浮動元素中間有註釋或者內聯元素的時候，就會出現文字溢出，內聯元素越多，溢出越多.

並且，若是中間存在註釋，也會觸發 BUG.

既然咱們將問題提了出來，那就確定有解決的辦法。

咱們推薦，用塊元素標籤把註釋或者內聯元素包裹起來。

這樣就能夠有效的避免觸發這個 BUG 了。

14.絕對定位失效 BUG

案例代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 200px; height: 200px; border: 1px solid #000; position: relative; } a{ position: absolute; width: 40px; height: 40px; background: red; right: 20px; top: 20px; } ul{ width: 150px; height: 150px; background: yellow; margin: 0 0 0 50px; padding: 0; float: left; display: inline; } </style> </head> <body> <div class="box"> <ul></ul> <a href="javascript:void(0)"></a> </div> </body> </html>

上面的案例代碼，在標準瀏覽器中顯示徹底沒有問題。

可是當咱們在低版本瀏覽器中，顯示就會出現問題了。

這個問題的觸發緣由：

在 IE 6 下，當浮動元素和絕對定位元素是兄弟關係的時候，絕對定位會失效。

那咱們該怎麼解決呢？

很是簡單，不讓浮動元素和絕對定位是兄弟關係就能夠咯。

咱們能夠用 div 標籤嵌套一下，這樣分隔開來就不會觸發剛纔的問題了。

15.滑動元素 BUG

案例代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 200px; height: 200px; border: 1px solid #000; overflow: auto; } .div{ width: 150px; height: 300px; background: red; position: relative; } </style> </head> <body> <div class="box"> <div class="div"></div> </div> </body> </html>

這時候咱們在標準瀏覽器中查看一下。

不論是滑動仍是其餘方式都沒問題，可是，IE 下就沒問題了麼？

哼哼，前端三毒，名不虛傳。

問題緣由在這：在 IE 6/7 下，子級元素有相對定位，父級 overflow 包不住子級元素。

那咱們該怎麼處理這個問題？

既然子元素有相對定位，那咱們就給父元素一樣給出相對定位唄。

這樣就能輕鬆解決掉這個問題了。

16.像素誤差 BUG

案例代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 201px; height: 201px; border: 1px solid #000; position: relative; } .box span{ width: 20px; height: 20px; background: yellow; position: absolute; right: -1px; bottom: -1px; } </style> </head> <body> <div class="box"> <span></span> </div> </body> </html>

上面的代碼，在標準瀏覽器中能夠正常顯示。

屏幕快照 2016-09-28 11.40.07.png

可是若是放在 IE 中顯示呢？

這個問題的緣由：

在 IE 6 下，若是絕對定位的父級寬和高是奇數的時候，子級元素的 right 和 bottom 會有1像素的誤差。

至於解決方案，很差意思，沒有。

這個東西只能去儘可能避免，若是沒辦法，只能這麼作，那你就要和美工大爺提早商量好了，要麼你改，要我我弄完你別找個人事。（我之前就這麼幹的，羞澀...）

17.固定定位 BUG

案例代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ height: 2000px; background: red; } .box{ width: 200px; height: 200px; background: yellow; position: fixed; top: 30px; left: 100px; } </style> </head> <body> <div class="box"></div> </body> </html>

咱們在標準瀏覽器中，顯示是正常的。

而在 IE 瀏覽器中，你會發現，我們設置的固定定位失效了！

這實際上是由於，在 IE 6 中不存在固定定位，只存在絕對定位。

那咱們該怎麼作呢？

在 IE 低版本下，咱們只能經過 JS 去模擬這個效果。

18.透明度失效

案例代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ height: 2000px; background: red; } .box{ width: 200px; height: 200px; background: yellow; position: fixed; top: 30px; left: 100px; opacity: 0.5; } </style> </head> <body> <div class="box"></div> </body> </html>

咱們在應用了定位以後，常常會用到 opacity這個屬性，在標準瀏覽器中，顯示是沒有任何問題的。

可是若是在 IE 中去查看呢？

你會發現，個人透明度失效了！

這實際上是由於，在 IE 中實際上是不認識 opacity 這個屬性的。

那咱們若是想要在 IE 中使用透明度，該怎麼作呢？

咱們能夠這麼用。

這樣咱們的透明度就均可以正常使用了。

19.input 元素的 BUG

案例代碼：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ width: 200px; height: 32px; border: 1px solid #000; } input{ width: 100px; height: 30px; border: 1px solid red; margin: 0; padding: 0; } </style> </head> <body> <div class="box"> <input type="text" name=""> </div> </body> </html>

在標準瀏覽器中顯示是沒有什麼異常的。

可是，在 IE 6 和 IE 7 中，輸入型表單控件上下會有 1px 的間隙。

那咱們怎麼去解決呢？

咱們其實能夠經過設置浮動就能解決。

20. IE 中不支持 png 圖片的問題

咱們在平時的開發中，不免會遇到各類各樣的圖片，不少時候都是咱們的美工大爺給咱們提早切好的，可是咱們偶爾仍是須要本身弄一些圖片。

那在處理圖片以後，你們通常使用的圖片格式都是什麼呢？

他們之間有哪些區別呢？咱們今天首先來看一下。

這裏我首先經過 PS 去製做了一張圖片，具體的圖片製做方式在此不作更多說明。

重點在圖片的導出的時候，咱們在導出時，不一樣的圖片格式都有什麼差異呢？

首先咱們先來看看 GIF 的導出。

咱們會發現，圖片要麼是直接透明的，要麼是不透明的，不存在漸變這個效果。

而 JPEG 呢？

徹底沒有透明效果。

而咱們經常使用的 PNG 格式呢？

這裏首先來看看 PNG-8

和 GIF 很是相似,可是大小要小不少。

最後咱們再來看看 PNG-24.

咱們會發現，咱們圖片的大小略大，可是透明效果所有存在。

明白了上面各類圖片的特性以後，咱們再來看看下面的案例。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ background: #000; } .box{ width: 400px; height: 400px; background: url("1.png"); } </style> </head> <body> <div class="box"></div> </body> </html>

在標準瀏覽器中，顯示徹底沒有問題。

那麼接下來一塊兒再來看看 IE 中的顯示。

發現了麼？

咱們的透明效果徹底失效了，咱們使用的但是 PNG-24 呀。

這是爲何呢？

這實際上是由於，在IE 6 下，不支持透明度的方式。

那咱們怎麼去處理這個問題呢？

咱們其實能夠經過一個 JS 文件來處理它。

處理工具：DD_belatedPNG

使用起來其實也很是簡單。

這樣在 IE 6下，咱們的 PNG 圖片也能夠正常顯示啦。

21.條件註釋語句

接下來給你們介紹一個小套路，就是條件註釋語句，這個是咱們日常處理兼容時很經常使用的一個小技巧。

使用方式也很是簡單。

注意，這裏的書寫方式是固定的，不可以更改。

那咱們寫這個有什麼效果呢？

咱們會發現，在標準瀏覽器中咱們是看不見任何東西的。

可是在特定的 IE 版本中，咱們能夠看到註釋之間的文字。

甚至咱們也能夠在蘋果官網中看到這樣的處理方法。

22.CSS HACK

最後再給你們介紹一個差很少算是「走火入魔」的處理方法。

就是咱們其實能夠根據不一樣的 IE 瀏覽器版本去執行特定的代碼。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* CSS HACK */ .box{ width: 100px; height: 100px; background: red; background: yellow\9; +background: black; _background:pink; /* \9 ： IE 10 以前的瀏覽器解析的代碼 + 或者 * ： IE 7（包括 7）以前的 IE 瀏覽器 _ ： IE 6（包括 6）以前的 IE 瀏覽器 */ } </style> </head> <body> <div class="box"></div> </body> </html>