IE兼容性問題

時間 2019-11-12

標籤兼容性問題简体版

原文原文鏈接

第十一章網頁兼容的處理javascript

對於一個網頁設計師來講，衆多瀏覽器間的CSS兼容問題歷來都是很是棘手的。因爲不一樣的瀏覽器（常見的包括IE6,IE7,Firefox等）對CSS的解析和認知的不一樣，嚴重形成了瀏覽器頁面效果的不一致，使得咱們在進行DIV+CSS頁面排版時，不得不時刻考慮到常見瀏覽器間的CSS兼容性問題。css

11.1 解決瀏覽器兼容的原理html

什麼是CSS Hack呢？java

爲解決瀏覽器間的CSS兼容性問題，設計師們針對不一樣瀏覽器寫不一樣的CSS code的過程，就是一個Hack的過程了。在這個過程當中，不但要作到瀏覽器的兼容性，更要合理地作到CSS代碼的絕對優化，儘量少地人爲製造冗餘的代碼，使CSS代碼儘量簡練易讀也是很是重要的工做之一。編程

爲何要用CSS Hack呢？json

答案很簡單，經過對CSS代碼的兼容性問題的解決，使得咱們寫出的頁面能在不一樣的瀏覽器中達到統一的頁面效果。不會出現IE瀏覽器中無缺的頁面拿到FF中去就橫七豎八千瘡百孔的事情。數組

CSS Hack的原理是什麼？瀏覽器

根據不一樣瀏覽器對CSS樣式的支持程度，解析結果和識別CSS的優先級不一樣，設計師們就能夠根據這些不一樣瀏覽器的特色來書寫不一樣的CSS樣式代碼。IE6能識別下劃線_和星號*，IE7能識別星號*，不能識別下劃線_，而firefox兩個都不能識別，如此，就能夠針對IE6.IE7和FF經過對這些特殊符號的使用寫不一樣的代碼了。測試

div{background:green; /* for FireFox */優化

*background:red; /* for IE7 */

_background:blue; /* for IE6 */

}

該樣式顯示的效果是：在FireFox中背景色爲green；在IE7中背景色爲red；在IE6中背景色爲blue。

CSS解析的過程：CSS讀取的順序是由上至下，由左至右。在FireFox下，FireFox不能識別*和_，將下面的兩行代碼過濾掉不做任何解析，執行background:green;完後結束；在IE7下的解析結果爲div{ background:green; *background:red; },根據CSS的優先級能夠肯定後面出現的樣式會優先於前者被調用，即實現*background:red;的解析；在IE6下，由於三種樣式代碼均可以解析，解析結果爲div{ background:green; *background:red; _background:blue;}，但一樣根據CSS的優先級，只會把最後一個樣式讀取，即_background:blue;被應用。

此外，!important聲明也能夠很好地提高指定樣式規則的應用優先權。在IE6和FF中用!important聲明能夠提升優先級別，但在IE6中的!important聲明會被以後的同名屬性定義替換。因此，經過*和!important聲明二者的搭配也能夠很好地解決IE6，IE7和FF三者之間的兼容性問題。

區別IE6與FF：background:red; *background:blue;

區別IE6與IE7：background:green !important;background:blue;

區別IE7與FF：background:red; *background:green;

區別FF，IE7，IE6：background:red; *background:green !important; *background:blue;

注：IE都能識別*;FF不能識別*；IE6能識別*，但不能識別 !important；IE7能識別*，也能識別!important;FF不能識別*，但能識別!important;

書寫的順序都是FireFox的寫在前面，IE7的寫在中間，IE6的寫在最後面。

除了作CSS HACK，咱們在寫CSS的時候要儘可能避免可能會出現不兼容的寫法，例如margin-top和padding-top，咱們知道使用margin-top在IE8裏面可能會不兼容，因此咱們儘可能使用padding-top。一樣的，若是你使用高，則儘可能記得在height屬性的後面加上overflow屬性。下面咱們彙總儘可能多的瀏覽器兼容的解決辦法給你們。

11.2 瀏覽器兼容處理彙總

一、解決IE7和IE7以上版本的兼容問題。

在<head>的後面插入以下代碼：

<meta http-equiv="x-ua-compatible" content="ie=7" />

這句話的意思是當瀏覽器的版本高於IE7時以IE7的模式加載網頁。

二、解決IE6不支持png圖的問題。

打開http://www.chinalooke.com/js/ie6.js下載JS文件到站點js目錄下，把如下代碼放到head之間。

<!--[if lte IE 6]> <script src="js/ie6.js" type="text/javascript"></script>

DD_belatedPNG.fix('div, ul, img, li, input , a');</script>

<![endif]-->

把上面的代碼放在head之間。

三、解決IE6不支持除a標記之外的標記的僞類。

打開

http://www.chinalooke.com/UploadFiles/clubfiles/2011-03/2011030414170752881.rar

將下載下來的文件解壓到站點根目錄下。

在css文件的body{}中加入behavior:url("hover.htc");

四、解決border的邊界顯示不完整的方法

若是咱們對盒子定義了border值，那麼在盒子的左右兩邊會出現斷斷續續的狀況，解決的辦法是在盒子中加入background屬性和值，背景顏色和背景圖片均可以。

五、解決左右高度自適應

有時候咱們須要盒子的左右兩個子盒子的內容隨着任意一個盒子的高自適應，作法是在大盒子裏不定義高，但必定加入overflow:hidden，同時左右兩個子盒子都寫一個底部內邊距和底部外邊距，一正一負相互抵消，如padding-bottom: 1980px; margin-bottom: -1980px;值必定要寫得很大，超過預計的內容的高度便可。代碼實例以下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>解決左右高度自適應</title>

.main { width: 800px; margin: 0 auto; margin-top: 20px; color: #FFF; overflow: hidden;}

.left {float: left; width: 550px; background: #f00; border: 1px solid #666; padding-bottom: 980px; margin-bottom: -980px;}

.right {float: right; width: 240px; background: #090; border: 1px solid #666; padding-bottom: 980px; margin-bottom: -980px; }

</style>

</head>

<body>

左邊

</div>

<p>fdsfdsfdsf </p>

</div>

</body>

</html>

六、解決IE6下左浮動左邊距爲雙倍的問題。

在IE6下，若是向左浮動的第一個盒子若是同時存在左外邊距，那麼顯示的真實結果是設定值的兩倍，如 .left{float:left;margin-left:10px;}，那麼這個盒子在IE6下左邊距爲20px，解決這個問題的辦法有兩種，一種是在裏面加入display:inline，另一種是再加一個IE6優先的_margin-left:5px;將值減半。

七、解決IE6的最小高度問題

在IE6下，盒子的最小高度不能少於12px，解決的辦法是在高後面加入overflow:hidden或者是加入font-size:1px;

八、解決盒子真實寬高的計算問題

在IE下面盒子的真實寬和高分爲已經定義寬和高以及沒有定義寬和高兩種狀況。

當盒子已經定義寬和高的時候，真實的寬和高=padding值+border值+width值

當盒子沒有定義寬和高的時候，真實的寬和高=父級的寬和內容的高

九、解決圖片以及表單項的垂直居中問題

對於單行文本中出現了圖片img和表單項input會使得其與文字垂直方向不能居中對齊的解決辦法就是在CSS中對圖片或表單賦予一個屬性 vertical-align:middle; 這個方法在第九章中詳細講解過。

十、解決IE6下的圖片下面有空隙的問題

解決IE6下的圖片下面有空隙的問題只須要在在圖片控制屬性下加入vertical-align屬性或者直接display轉成外聯元素。

十一、解決英文不斷行的問題

在盒子裏加入word-wrap:break-word屬性能夠解決IE中英文不斷行的問題。

十二、解決ie六、七、8不支持json，解決方法：引入json2.js

加在head之間

1三、解決了IE8不支持數組的indexOf方法

今天，測試報過來一個js bug, 在IE8下有個js錯誤，可是在其它瀏覽器下(Firefox, Chrome, IE9)下面都很正常。後來調試發現緣由是在IE8下，js數組沒有indexOf方法。

在使用indexOf方法前，執行一下下面的js, 原理就是若是發現數組沒有indexOf方法，會添加上這個方法。

if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt /*, from*/)
  {
    var len = this.length >>> 0;
    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;
    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}