瀏覽器兼容問題

全部瀏覽器 通用
height: 100px;

IE6 專用
_height: 100px;

IE6 專用
*height: 100px;

IE7 專用
*+height: 100px;

IE七、FF 共用
height: 100px !important;

 

程序代碼

height:100px;
*height:120px;
_height:150px;

下面我簡單解釋一下各瀏覽器怎樣理解這三個屬性：

在FF下，第二、3個屬性FF不認識，因此它讀的是 height:100px;

在IE7下，第三個屬性IE7不認識，因此它讀第一、2個屬性，又由於第二個屬性覆蓋了第一個屬性，因此IE7最終讀出的是第2個屬性 *height:120px;

在IE6下，三個屬性IE6都認識，因此三個屬性均可以讀取，又由於第三個屬性覆蓋掉前2個屬性，因此IE6最終讀取的是第三個屬性。

---

 

1.爲何在不一樣的瀏覽器顯示效果不同？ 
由於不一樣瀏覽器對於css樣式表的解析不同，因此致使樣式乃至層佈局發生變化。例如，ff中設置padding屬性時，div會相應增長height和width，而ie的解析是不會的，再例如ff對盒模型的解析和ie相差兩個象素。

2.設計時要作到全部瀏覽器都兼容嗎？ 
根據「設計訴說」的站點統計小樣本結果顯示，6225個訪問者中有72.1%使用IE6.0；12.7%使用IE7.0；7.9%在使用FF2.0，剩餘的不一樣版本的瀏覽器佔的百分比都不到1% 。因此我認爲只要作到IE6 FF2.0 以及新出的IE7.0兼容便可，頂多向下兼容一下IE5.5，徹底沒有必要爲了那些個小數點費勁腦子。若是有必要能夠另外設計css文件，而後經過js判斷瀏覽器版本進行選擇相應的文件。

3.css樣式的優先級是怎麼樣的？ 
在正常的IE中，若是你在css中重複定義一個屬性時，瀏覽器解析的是後面的屬性，

示例：box {height:100px;height:200px;height:400px;height:300px;}

<1> 區分三款瀏覽器簡單方法: 
#example { color: #333; } /* Moz FF */ 
* html #example { color: #f0f; } /* IE6 */ 
*+html #example { color: #0ff; } /* IE7 */ 
在兼容IE7的*+html的hack必定要在頂部加入DTD聲明，不然無效。

 

<2> ie7.0與ie6.0的之間不兼容 
ie7與ie6 在div+css出現寬度定義不一樣，在寬度定義上出現寬度的解釋不一樣

IE7寬度在IE6上要寬一些,正是這個緣由網頁可能會出現溢出問題, 還好這個問題能夠經過更改數值或者修改一下百分比解決.。

ie7.0修復了!important這個bug。

先前因爲ie6.0對!important識別存在bug, 在firefox和IE中的BOX模型解釋不一致致使相差2px，大部分網頁標準設計師經過這個bug來兼容 ie6.0和firefox，

即採用：div {margin:30px!important;margin:28px;}。

可是ie7.0把這個bug給修復了,因此問題又出現了,怎麼兼容 ie.7.0的同時又能兼容ie6.0和firefox？

不過ie7 也能識別!important 也能夠經過這個來區分IE6。 ie7.0對不少不規範的css再也不支持，對js語法要求更嚴格規範。 不少在IE6下正常顯示的js頁面，在IE7下均不能正常顯示，而且尚未提示錯誤。

ie7.0對js語法要求更嚴格規範，只是這個規範彷佛並無說明，也沒有明白的告訴你們，他們是怎麼「規」怎麼「範」的 .

 

<3> 如何作到讓IE6.0與FF兼容？ 
最經常使用的一種方法了，也是屢試不爽的——「!important」，這個字段是用來提升優先級的，而IE6.0對於找個字段是沒法識別的，因而FF與 IE6.0就能夠分開解析。

 

注意事項: 
一、float的div必定要閉合。 
例如：(其中floatA、floatB的屬性已經設置爲float:left;) 
< #div id="floatA" > 
< #div id="floatB" > 
< #div id="NOTfloatC" > 
這裏的NOTfloatC並不但願繼續平移，而是但願往下排。這段代碼在IE中毫無問題，問題出在FF。緣由是NOTfloatC並不是float標籤，必須將 float標籤閉合。

在 
< #div class="floatB"> 
< #div class="NOTfloatC"> 
之間加上 
< #div class="clear"> 
這個div必定要注意聲明位置，必定要放在最恰當的地方，並且必須與兩個具備float屬性的div同級，之間不能存在嵌套關係，不然會產生異常。

此外，爲了讓高度能自動適應，要在wrapper裏面加上overflow:hidden;

當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性，用zoom:1;能夠作到，這樣就達到了兼容。

例如某一個wrapper以下定義：colwrapper{overflow:hidden;zoom:1;margin:5px auto;}

 

二、margin加倍的問題 
設置爲float的div在ie下設置的margin會加倍，這是一個ie6都存在的bug。

解決方案是在這 個div裏面加上display:inline

相應的css爲 
#IamFloat{ 
                   float:left; 
                   margin:5px;/*IE下理解爲10px*/ 
                   display:inline;/*IE下再理解爲5px*/}

 

三、關於容器的包涵關係 
不少時候，尤爲是容器內有平行佈局，例如兩、三個float的div時，寬度很容易出現問題。在IE中，外層的寬度會被內層更寬的div擠破。

必定要用Photoshop或者Firework量取像素級的精度。

 

四、關於高度的問題 
若是是動態地添加內容，高度最好不要定義。瀏覽器能夠自動伸縮，然而若是是靜態的內容，高度最好定好。

 

五、最狠的手段 —— !important; 
若是實在沒有辦法解決一些細節問題,能夠用這個方法。FF對於」!important」會自動優先解析,然而IE則會忽略,

值得注意的是，必定要將 xxxx !important 這句放置在另外一句之上.

 

6.DOCTYPE 影響 CSS 處理

 

7.FF: div 設置 margin-left, margin-right 爲 auto 時已經居中, IE 不行.

 

8.FF: body 設置 text-align 時, div 須要設置 margin: auto(主要是 margin-left,margin-right) 方可居中.

 

9.FF: 設置 padding 後, div 會增長 height 和 width, 但 IE 不會, 故須要用 !important 多設一個 height 和 width.

 

10.FF: 支持 !important, IE 則忽略, 可用 !important 爲 FF 特別設置樣式

 

11.div 的垂直居中問題: vertical-align:middle; 將行距增長到和整個DIV同樣高 line-height:200px; 而後插入文字，就垂直居中了 。缺點是要控制內容不要換行

 

12.cursor: pointer 能夠同時在 IE FF 中顯示遊標手指狀， hand 僅 IE 能夠.

 

13.FF: 連接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。

    參照 menubar, 給 a 和 menubar 設置高 度是爲了不底邊顯示錯位, 若不設 height, 能夠在 menubar 中插入一個空格。

 

14.在mozilla firefox和IE中的BOX模型解釋不一致致使相差2px解決方法：

div{margin:30px!important;margin:28px;}

注意這兩個margin的順序必定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器能夠識別。

因此在IE下其實解釋 成這樣： 

div{maring:30px;margin:28px} 
重複定義的話按照最後一個來執行，因此不能夠只寫margin:XXpx!important; 
　　

15.IE5 和IE6的BOX解釋不一致 

IE5下 ：div{width:300px;margin:0 10px 0 10px;} 

div的寬度會被解釋爲300px-10px(右填充)-10px(左填充)最終div的寬度爲280px，而在IE6和其餘瀏覽器上寬度則是以300px+10px(右填 充)+10px(左填充)=320px來計算的。

這時咱們能夠作以下修改：
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px} 

16.ul標籤在Mozilla中默認是有padding值的,而在IE中只有margin有值，

因此先定義 ：ul{margin:0;padding:0;}     就能解決大部分問題

 

17.ff下父容器的高度自適應 
  height:100%; overflow:auto

 

18.各瀏覽器padding兼容 
padding:0px;  /*ff*/ 
*padding:0px; /*ie7.0*/ 
_padding:0px; /*ie6.0 */

 

19.img 下的留白

你們看這段代碼有啥問題： 
<div> 
<img src=」" mce_src=」" /> 
</div> 
把div的border打開，你發現圖片底部不是緊貼着容器底部的，是img後面的空白字符形成，要消除必須這樣寫 
<div> 
<img src=」" mce_src=」" /></div> 

 

20. 失去line-height

<div style=」line-height:20px」><img />文字</div>，很遺憾，在ie6下單行文字 line-height 效果消失了。

緣由是<img />這個inline-block元素和inline元素寫在一塊兒了。解決方案：讓img 和文字都 float起來 

21 .IE 5.x/Win
在此咱們指Windows平臺上的IE 5.0和IE 5.5。CSS的支持依然很糟糕，可是比起NN 4.x已經有了長足的改變。

它們臭名昭著錯誤的盒狀模型（Box model）多是致使CSS界第一個hack的出現。咱們先來看看盒狀模型。

W3C規範的盒子，可使用「相加」來描述，即，一個元素的實際盒子寬度是由內容寬度（content width）,邊框（border），邊距（padding）堆積起來的。

而IE 5.x/Win則能夠用「相減」來描述，也被稱爲邊框盒狀模型（border box model），一個元素的實際寬度就是該元素的width設值，邊框，邊距都從中減去。

 

來看一個例子：
div { width: 200px; margin: 20px; padding: 20px; border: 5px;}

依照W3C規範，這個div實際所佔寬度是5px + 20px + 200px + 20px + 5px。

而對IE5.x/Win的邊框盒狀模型來講，這個div實際寬度就是200px，而內容寬度被壓迫到只有150px：200px - 5px - 20px - 20px - 5px。這時候，出現了Box Model Hack.

該hack使用了IE 5.x/Win不支持的voice-family，並在值中設置一些CSS轉義引號（CSS-escape quotes）欺騙IE 5.x/Win認爲規則塊（declaration block）已經閉合。

div { /*爲了更好說明，width調了一下寫做習慣*/ margin: 20px; padding: 20px; border: 5px; width: 240px;           /* 1. IE 5.x/Win須要的寬度 */ voice-family: "\"}\"";  /* 2. IE

5.x/Win看見了}，認爲規則已經結束了 */ voice-family: inherit;  /* 3. 可以正確解析的瀏覽器重置該值 */ width: 200px;           /* 4. 這纔是咱們須要的真正寬度 */}  

 

21.圖片下方出現幾像素的空白間隙
問題說明：這個問題在ie6和ff（火狐）下常常見到。

例如 <div><img src=""/></div>這個圖片下面會有一條空白間隙。

解決方法：給圖上一個垂直方向的屬性如:vertical-align: top(任意一個就行middle);

這個問題從而延伸到——object(視頻)和textarea在火狐下也會出現相似的問題，解決方法同樣。

重置代碼裏就有這樣一個全局定義：object,textarea,img{vertical-align: top;}

22.IE6雙倍margin的BUG(雙邊距)
問題說明：這是ie6一個著名的bug，當一個元素向一邊浮動時，其它同一個方向若是有margin的話，ie6就會產生雙倍的margin。

例如：<div style="float: left;margin-left: 10px;"></div>在ie6下顯示會有margin-left:20px的距離

解決方法：加個_display:inline:屬性

例如<div style="float: left;margin-left: 10px;_display: inline;"></div>

23.ie6下的浮動元素和非浮動元素間出現3像素BUG
問題說明：這也是ie6一個著名的bug,當一個元素浮動時，同級別的文字沒有浮動，在ie6下它們之間就會產生3個像素的bug。

例如：<div><img style="float: left;" src=""/>摘要摘要摘要摘要</div>,圖片和文字就會出現3像素

解決方法：方法一，兩個元素都浮動，

如：<div><img style="float: left;" src=""/><span style="float: left;">摘要摘要摘要摘要</span></div>;

方法二，這種設計時通常圖片和文字要有間隙的，作個ie6的hack就行,

如：<div><img style="float: left;" src=""/><span style="margin-right: 5px; _margin-right: 2px;">摘要摘要摘要摘要</span></div>

24.li在IE中底部空行
問題說明：當li裏面有兩個以上的浮動元素時，li的下面就會產生一條空白間隙，

例如：<ul class="tlist"><li><span style="float: left;">欄目</span><a style="float: left;" href="#" target="_blank">標題標題標題</a></li></ul>

解決方法：這個問題和第一個問題很類似，解決方法也是同樣，在li上加個垂直方向的屬性，

例如：<ul class="tlist"><li style="vertical-align: top;"><span style="float: left;">欄目</span><a style="float: left;" href="#" target="_blank">標題標題標題</a></li></ul>

 

25.IE6樣式中文註釋後引起失效

問題說明：這是ie6 出現的奇怪現象。這是因爲css 和html 的編碼不一樣所引致,知足下面條件就會引發註釋下面的樣式不起做用：

1). css有中文註釋

2). css爲ANSI編碼

3). html爲utf-8編碼

解決方法：
1). 去掉中文註釋，用英文註釋或者多打幾個「*」，這是ahuing在以前的教程裏提到的，例如： /*** 註釋 ***/
2). 統一css 和 html 的編碼
建議採用第二種解決方法。ps： css爲uft-8  html 爲ANSI ，貌似不會出現失效的狀況。

26.IE6出現重複字符(文字溢出)

問題說明：一個容器包含2兩個具備「float」樣式的子容器，第二個容器的寬度大於父容器的寬度，或者父容器寬度減去第二個容器寬度的值小於3，在第二個容器前存在註釋（這也是爲何此bug也叫作「IE6註釋bug」的緣由）。

例以下列代碼：

 1 <!DOCTYPE html PUBLIC "-//W3C//liD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/liD/xhtml1-transitional.lid">  2  3 <html xmlns="http://www.w3.org/1999/xhtml">  4  5 <head>  6  7 <meta http-equiv="Content-Type" content="text/html; charset=gbk" />  8  9 <title>標題</title> 10 11 <style> 12 13 *{ 14  margin: 0;padding: 0;font-size: 12px; 15 } 16  .a{width:205px;} 17 .b{ 18  float: left; 19  width: 50px; 20  background: black;color: #fff;margin-right: 5px; 21  overflow: hidden; 22 } 23 .c{ 24  float: left; 25  width: 150px; 26  background: red; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="a"> 32 <div class="b">測試測試測試測試測試測試測試111111111111</div> 33 <!-- 註釋 --> 34 <div class="c">測試測試測試測試測試測試測試2222222222</div> 35 </div> 36 </body> 37 </html>

 

解決方法：

爲什麼會出現重複文字，誰也沒說清楚，包括官方，這個問題，我的認爲，ie6將註釋也當成內容存在。如何消滅重複文字，只要讓上面任何一個條件不知足便可。

改變結構，不出現【一個容器包含2兩個具備「float」樣式的子容器】的結構。

1).減少第二個容器的寬度，使父容器寬度減去第二個容器寬度的值大於3。
2).去掉全部的註釋。
3).在第二個容器後面加一個或者多個<div style="clear"></div>來解決。 
4).給溢出文字的標籤加position: relative;屬性 

27.png圖片在IE6下出現透明或背景變灰的bug;

問題說明：這裏的png圖片是指32位和24位的，8位的png圖片透明ie6是支持的。

解決方法：
1)使用濾鏡，語法以下
.image-style 
{ background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png", sizingMethod="scale"); }

注意：使用濾鏡須要損耗性能。

2)給IE6單獨製做一張.gif圖片(或者8位的png圖片)，打上hack
.image-style{ background:transparent url("filename.png") no-repeat scroll 0 0;_background-image:url("filename.gif"); }

這種方法只須要在切圖時多存儲一份.gif格式的圖片，通常採用這種方法。

參考：http://www.javashuo.com/article/p-zhjeuvhw-gv.html