這樣解決瀏覽器不兼容問題

時間 2019-12-02

原文原文鏈接

瀏覽器兼容性問題怎麼解決？css

若是想解決瀏覽器的兼容性問題，你首先要明白在一個瀏覽器顯示正常的代碼爲何會在其餘瀏覽器出現瀏覽器不兼容的問題？這是由於各個瀏覽器對於HTML標籤或者DIV盒子模型的解析不一樣形成的，常常會出現問題的瀏覽器非IE莫屬，由於IE瀏覽器自己自有的layout，真的是讓不少前端人員痛苦不堪。鑑於此我列舉一些經常使用的檢測不兼容代碼的方法！html

1.排除法，逐行刪除標籤檢測出問題的代碼。前端

2.加邊框法。給每一個盒子加border。這樣就能夠看出哪一個盒子顯示不正常。java

3.刪除CSS，把樣式表逐行刪除，檢測哪段樣式有問題。css3

如下爲常見的一些瀏覽器兼容問題及解決方法web

瀏覽器兼容問題一：不一樣瀏覽器的標籤默認的外補丁和內補丁不一樣chrome

問題症狀：隨便寫幾個標籤，不加樣式控制的狀況下，各自的margin 和padding差別較大。express

碰到頻率:100%瀏覽器

解決方案：CSS裏 *{margin:0;padding:0;}app

備註：這個是最多見的也是最易解決的一個瀏覽器兼容性問題，幾乎全部的CSS文件開頭都會用通配符*來設置各個標籤的內外補丁是0。

瀏覽器兼容問題二：塊屬性標籤float後，又有橫行的margin狀況下，在IE6顯示margin比設置的大

問題症狀:常見症狀是IE6中後面的一塊被頂到下一行

碰到頻率：90%（稍微複雜點的頁面都會碰到，float佈局最多見的瀏覽器兼容問題）

解決方案：在float的標籤樣式控制中加入 display:inline;將其轉化爲行內屬性

備註：咱們最經常使用的就是div+CSS佈局了，而div就是一個典型的塊屬性標籤，橫向佈局的時候咱們一般都是用div float實現的，橫向的間距設置若是用margin實現，這就是一個必然會碰到的兼容性問題。

瀏覽器兼容問題三：設置較小高度標籤（通常小於10px），在IE6，IE7，遨遊中高度超出本身設置高度

問題症狀：IE六、7和遨遊裏這個標籤的高度不受控制，超出本身設置的高度

碰到頻率：60%

解決方案：給超出高度的標籤設置overflow:hidden;或者設置行高line-height 小於你設置的高度。

備註：這種狀況通常出如今咱們設置小圓角背景的標籤裏。出現這個問題的緣由是IE8以前的瀏覽器都會給標籤一個最小默認的行高的高度。即便你的標籤是空的，這個標籤的高度仍是會達到默認的行高。

瀏覽器兼容問題四：行內屬性標籤，設置display:block後採用float佈局，又有橫行的margin的狀況，IE6間距bug

問題症狀：IE6裏的間距比超過設置的間距

碰到概率：20%

解決方案：在display:block;後面加入display:inline;display:table;

備註：行內屬性標籤，爲了設置寬高，咱們須要設置display:block;(除了input標籤比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具備了塊屬性float後的橫向margin的bug。不過由於它自己就是行內屬性標籤，因此咱們再加上display:inline的話，它的高寬就不可設了。這時候咱們還須要在display:inline後面加入display:talbe。

瀏覽器兼容問題五：圖片默認有間距

問題症狀：幾個img標籤放在一塊兒的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起做用。

碰到概率：20%

解決方案：使用float屬性爲img佈局

備註：由於img標籤是行內屬性標籤，因此只要不超出容器寬度，img標籤都會排在一行裏，可是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。（個人一個學生使用負margin，雖然能解決，但負margin自己就是容易引發瀏覽器兼容問題的用法，因此我禁止他們使用）

瀏覽器兼容問題六：標籤最低高度設置min-height不兼容

問題症狀：由於min-height自己就是一個不兼容的CSS屬性，因此設置min-height時不能很好的被各個瀏覽器兼容

碰到概率：5%

解決方案：若是咱們要設置一個標籤的最小高度200px，須要進行的設置爲：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

備註：在B/S系統前端開時，有不少狀況下咱們又這種需求。當內容小於一個值（如300px）時。容器的高度爲300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候咱們就會面臨這個兼容性問題。

瀏覽器兼容問題七：透明度的兼容CSS設置

作兼容頁面的方法是：每寫一小段代碼（佈局中的一行或者一塊）咱們都要在不一樣的瀏覽器中看是否兼容，固然熟練到必定的程度就沒這麼麻煩了。建議常常會碰到兼容性問題的新手使用。不少兼容性問題都是由於瀏覽器對標籤的默認屬性解析不一樣形成的，只要咱們稍加設置都能輕鬆地解決這些兼容問題。若是咱們熟悉標籤的默認屬性的話，就能很好的理解爲何會出現兼容問題以及怎麼去解決這些兼容問題。

/* CSS hack*/

我不多使用hacker的，多是我的習慣吧，我不喜歡寫的代碼IE不兼容，而後用hack來解決。不過hacker仍是很是好用的。使用hacker我能夠把瀏覽器分爲3類：IE6 ；IE7和遨遊；其餘（IE8 chrome ff safari opera等）

◆IE6認識的hacker 是下劃線_ 和星號 *

◆IE7 遨遊認識的hacker是星號 *

好比這樣一個CSS設置：

height:300px;*height:200px;_height:100px;

IE6瀏覽器在讀到height:300px的時候會認爲高時300px；繼續往下讀，他也認識*heihgt，因此當IE6讀到*height:200px的時候會覆蓋掉前一條的相沖突設置，認爲高度是200px。繼續往下讀，IE6還認識_height,因此他又會覆蓋掉200px高的設置，把高度設置爲100px；

IE7和遨遊也是同樣的從高度300px的設置往下讀。當它們讀到*height200px的時候就停下了，由於它們不認識_height。因此它們會把高度解析爲200px，剩下的瀏覽器只認識第一個height:300px;因此他們會把高度解析爲300px。由於優先級相同且想衝突的屬性設置後一個會覆蓋掉前一個，因此書寫的次序是很重要的。

另外，附上常見的最全的CSS瀏覽器兼容問題

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

2. margin加倍的問題設置爲float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div裏面加上 display:inline; 例如： <#div id=」imfloat」> 相應的css爲 #IamFloat{ float:left; margin:5px;/*IE下理解爲10px*/ display:inline;/*IE下再理解爲5px*/}

3.浮動ie產生的雙倍距離 #box{ float:left; width:100px; margin:0 0 0 100px; //這種狀況之下IE會產生200px的距離 display:inline; //使浮動忽略} 這裏細說一下block與inline兩個元素：block元素的特色是,老是在新行上開始,高度,寬度,行高,邊距均可以控制(塊元素);Inline 元素的特色是,和其餘元素在同一行上,不可控制(內嵌元素); #box{ display:block; //能夠爲內嵌元素模擬爲塊元素 display:inline; //實現同一行排列的效果 diplay:table;

4 IE與寬度和高度的問題 IE 不認得min-這個定義，但實際上它把正常的width和height看成有min的狀況來使。這樣問題就大了，若是隻用寬度和高度，正常的瀏覽器裏這兩個值就不會變，若是隻用min-width和min-height的話，IE下面根本等於沒有設置寬度和高度。好比要設置背景圖片，這個寬度是比較重要的。要解決這個問題，能夠這樣： #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

5.頁面的最小寬度 min -width是個很是方便的CSS命令，它能夠指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width當作最小寬度來使。爲了讓這一命令在IE上也能用，能夠把一個<div> 放到 <body> 標籤下，而後爲div指定一個類, 而後CSS這樣設計： #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文檔不太正規。它實際上經過Javascript的判斷來實現最小寬度。

6.DIV浮動IE文本產生3象素的bug 左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //這句是關鍵} <div id="box"> <div id="left"></div> <div id="right"></div> </div>

7.IE捉迷藏的問題當div應用複雜的時候每一個欄中又有一些連接，DIV等這個時候容易發生捉迷藏的問題。有些內容顯示不出來，當鼠標選擇這個區域是發現內容確實在頁面。解決辦法：對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面結構儘可能簡單。

8.float的div閉合;清除浮動;自適應高度;

① 例如：<#div id=」floatA」 ><#div id=」floatB」 ><#div id=」 NOTfloatC」 >這裏的NOTfloatC並不但願繼續平移，而是但願往下排。(其中floatA、floatB的屬性已經設置爲 float:left;) 這段代碼在IE中毫無問題，問題出在FF。緣由是NOTfloatC並不是float標籤，必須將float標籤閉合。在 <#div class=」floatB」> <#div class=」NOTfloatC」>之間加上 < #div class=」clear」>這個div必定要注意位置，並且必須與兩個具備float屬性的div同級，之間不能存在嵌套關係，不然會產生異常。而且將clear這種樣式定義爲爲以下便可： .clear{ clear:both;}

②做爲外部 wrapper 的 div 不要定死高度,爲了讓高度能自動適應，要在wrapper裏面加上overflow:hidden; 當包含float的 box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;能夠作到，這樣就達到了兼容。例如某一個wrapper以下定義： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③對於排版,咱們用得最多的css描述可能就是float:left.有的時候咱們須要在n欄的float div後面作一個統一的背景,譬如: <div id=」page」> <div id=」left」></div> <div id=」center」></div> <div id=」right」></div> </div> 好比咱們要將page的背景設置成藍色,以達到全部三欄的背景顏色是藍色的目的,可是咱們會發現隨着left center right的向下拉長,而 page竟然保存高度不變,問題來了,緣由在於page不是float屬性,而咱們的page因爲要居中,不能設置成float,因此咱們應該這樣解決 <div id=」page」> <div id=」bg」 style=」float:left;width:100%」> <div id=」left」></div> <div id=」center」></div> <div id=」right」></div> </div> </div> 再嵌入一個float left而寬度是100%的DIV解決之

④萬能float 閉合(很是重要!) 關於 clear float 的原理可參見 [How To Clear Floats Without Structural Markup],將如下代碼加入Global CSS 中,給須要閉合的div加上 class="clearfix" 便可,屢試不爽. /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ 或者這樣設置：.hackbox{ display:table; //將對象做爲塊元素級的表格顯示}

11.高度不適應高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用margin 或paddign 時。例： #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <div id="box"> <p>p對象中的內容</p> </div> 解決方法：在P對象上下各加2個空的div對象CSS代碼：.1{height:0px;overflow:hidden;}或者爲DIV加上 border屬性。

12 .IE6下爲何圖片下有空隙產生解決這個BUG的方法也有不少,能夠是改變html的排版,或者設置img 爲display:block 或者設置vertical-align 屬性爲 vertical-align:top | bottom |middle |text-bottom 均可以解決.

13.如何對齊文本與文本輸入框加上 vertical-align:middle; <style type="text/css">  </style>

14.web標準中定義id與class有什麼區別嗎一.web標準中是不允許重複ID的,好比 div id="aa" 不允許重複2次,而class 定義的是類,理論上能夠無限重複, 這樣須要屢次引用的定義即可以使用他. 二.屬性的優先級問題 ID 的優先級要高於class,看上面的例子三.方便JS等客戶端腳本,若是在頁面中要對某個對象進行腳本操做,那麼能夠給他定義一個ID,不然只能利用遍歷頁面元素加上指定特定屬性來找到它,這是相對浪費時間資源,遠遠不如一個ID來得簡單.

15. LI中內容超過長度後以省略號顯示的方法此方法適用與IE與OP瀏覽器 <style type="text/css">  </style>

16.爲何web標準中IE沒法設置滾動條顏色了解決辦法是將body換成html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css">  </style>

17.爲何沒法定義1px左右高度的容器 IE6下這個問題是由於默認的行高形成的,解決的方法也有不少,例如:overflow:hidden | zoom:0.08 | line-height:1px

18.怎麼樣才能讓層顯示在FLASH之上呢解決的辦法是給FLASH設置透明 <param name="wmode" value="transparent" />

19.怎樣使一個層垂直居中於瀏覽器中這裏咱們使用百分比絕對定位,與外補丁負值的方法,負值的大小爲其自身寬度高度除以二 <style type="text/css">  </style>

FF與IE

1. Div居中問題 div設置 margin-left, margin-right 爲 auto 時已經居中，IE 不行，IE須要設定body居中，首先在父級元素定義text-algin: center;這個的意思就是在父級元素內的內容居中。

2.連接(a標籤)的邊框與背景 a 連接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是爲了不底邊顯示錯位, 若不設 height, 能夠在 menubar 中插入一個空格。

3.超連接訪問事後hover樣式就不出現的問題被點擊訪問過的超連接樣式不在具備hover和active了,不少人應該都遇到過這個問題,解決方法是改變CSS屬性的排列順序: L-V-H-A Code: <style type="text/css">  </style>

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

5.UL的padding與margin ul標籤在FF中默認是有padding值的,而在IE中只有margin默認有值,因此先定義 ul{margin:0;padding:0;}就能解決大部分問題

6. FORM標籤這個標籤在IE中,將會自動margin一些邊距,而在FF中margin則是0,所以,若是想顯示一致,因此最好在css中指定margin和 padding,針對上面兩個問題,個人css中通常首先都使用這樣的樣式ul,form{margin:0;padding:0;}給定義死了,因此後面就不會爲這個頭疼了.

7. BOX模型解釋不一致問題在FF和IE 中的BOX模型解釋不一致致使相差2px解決方法：div{margin:30px!important;margin:28px;} 注意這兩個 margin的順序必定不能寫反， important這個屬性IE不能識別，但別的瀏覽器能夠識別。因此在IE下其實解釋成這樣： div {maring:30px;margin:28px}重複定義的話按照最後一個來執行，因此不能夠只寫margin:xx px!important; #box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0} #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

8.屬性選擇器(這個不能算是兼容,是隱藏css的一個bug) p[id]{}div[id]{} 這個對於IE6.0和IE6.0如下的版本都隱藏,FF和OPera做用.屬性選擇器和子選擇器仍是有區別的,子選擇器的範圍從形式來講縮小了,屬性選擇器的範圍比較大,如p[id]中,全部p標籤中有id的都是一樣式的.

9.最狠的手段 - !important; 若是實在沒有辦法解決一些細節問題,能夠用這個方法.FF對於」!important」會自動優先解析,然而IE則會忽略.以下 .tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} 值得注意的是，必定要將xxxx !important 這句放置在另外一句之上，上面已經提過

10.IE,FF的默認值問題或許你一直在抱怨爲何要專門爲IE和FF寫不一樣的CSS，爲何IE這樣讓人頭疼，而後一邊寫css，一邊咒罵那個可惡的M$ IE.其實對於css的標準支持方面，IE並無咱們想象的那麼可惡，關鍵在於IE和FF的默認值不同而已，掌握了這個技巧，你會發現寫出兼容FF和 IE的css並非那麼困難，或許對於簡單的css，你徹底能夠不用」!important」這個東西了。咱們都知道，瀏覽器在顯示網頁的時候，都會根據網頁的 css樣式表來決定如何顯示，可是咱們在樣式表中未必會將全部的元素都進行了具體的描述，固然也沒有必要那麼作，因此對於那些沒有描述的屬性，瀏覽器將採用內置默認的方式來進行顯示，譬如文字，若是你沒有在css中指定顏色，那麼瀏覽器將採用黑色或者系統顏色來顯示，div或者其餘元素的背景，若是在 css中沒有被指定，瀏覽器則將其設置爲白色或者透明，等等其餘未定義的樣式均如此。因此有不少東西出現FF和IE顯示不同的根本緣由在於它們的默認顯示不同，而這個默認樣式該如何顯示我知道在w3中有沒有對應的標準來進行規定，所以對於這點也就別去怪罪IE了。

11.爲何FF下文本沒法撐開容器的高度標準瀏覽器中固定高度值的容器是不會象IE6裏那樣被撐開的,那我又想固定高度,又想能被撐開須要怎樣設置呢？辦法就是去掉height設置min- height:200px; 這裏爲了照顧不認識min-height的IE6 能夠這樣定義: { height:auto!important; height:200px; min-height:200px; }

12.FireFox下如何使連續長字段自動換行衆所周知IE中直接使用 word-wrap:break-word 就能夠了, FF中咱們使用JS插入
的方法來解決 <style type="text/css">  </style> <div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> <scrīpt type="text/javascrīpt"> /* <![CDATA[ */ function toBreakWord(el, intLen){ var ōbj=document.getElementById(el); var strContent=obj.innerHTML; var strTemp=""; while(strContent.length>intLen){ strTemp+=strContent.substr(0,intLen)+"
"; strContent=strContent.substr(intLen,strContent.length); } strTemp+="
"+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37); /* ]]> */ </scrīpt>

13.爲何IE6下容器的寬度和FF解釋不一樣呢 <?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css">  </style> <div ōnclick="alert(this.offsetWidth)">讓FireFox與IE兼容</div> 問題的差異在於容器的總體寬度有沒有將邊框（border）的寬度算在其內,這裏IE6解釋爲200PX ,而FF則解釋爲220PX,那到底是怎麼致使的問題呢？你們把容器頂部的xml去掉就會發現原來問題出在這,頂部的申明觸發了IE的qurks mode,關於qurks mode、 standards mode的相關知識,請參考:http: //www.microsoft.com/china/msdn/library/webservices/asp.net/ ASPNETusStan.mspx?mfr=true IE6,IE7,FF IE7.0 出來了，對CSS的支持又有新問題。瀏覽器多了，網頁兼容性更差了，疲於奔命的仍是咱們，爲解決IE7.0的兼容問題，找來了下面這篇文章：如今我大部分都是用!important來hack，對於ie6和firefox測試能夠正常顯示，可是ie7對!important能夠正確解釋，會致使頁面沒按要求顯示！下面是三個瀏覽器的兼容性收集. 第一種，是CSS HACK的方法 height:20px; /*For Firefox*/ *height:25px; /*For IE7 & IE6*/ _height:20px; /*For IE6*/ 注意順序。這樣也屬於CSS HACK，不過沒有上面這樣簡潔。 #example { color: #333; } /* Moz */ * html #example { color: #666; } /* IE6 */ *+html #example { color: #999; } /* IE7 */  <link rel="stylesheet" type="text/css" href="css.css" />  <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]-->  <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> 第三種，css filter的辦法，如下爲經典從國外網站翻譯過來的。. 新建一個css樣式以下： #item { width: 200px; height: 200px; background: red; } 新建一個div,並使用前面定義的css的樣式： <div id="item">some text here</div> 在body表現這裏加入lang屬性,中文爲zh： <body lang="en"> 如今對div元素再定義一個樣式： *:lang(en) #item{ background:green !important; } 這樣作是爲了用!important覆蓋原來的css樣式,因爲:lang選擇器ie7.0並不支持,因此對這句話不會有任何做用,因而也達到了 ie6.0下一樣的效果,可是很不幸地的是,safari一樣不支持此屬性,因此須要加入如下css樣式： #item:empty { background: green !important } :empty選擇器爲css3的規範,儘管safari並不支持此規範,可是仍是會選擇此元素,無論是否此元素存在,如今綠色會如今在除ie各版本之外的瀏覽器上。對IE6和FF的兼容能夠考慮之前的!important 我的比較喜歡用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。