ie兼容 · 小白學電腦

新手可能會遇到一些兼容問題。放在這里供大家參考。 DIV+CSS解決IE6，IE7，IE8，FF兼容問題 1.IE8下兼容問題，這個最好處理，轉化成IE7兼容就可以。在頭部加如下一段代碼，然后只要在IE7下兼容了，IE8下面也就兼容了： 1. "<"metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/">" 2.float浮動造成IE6下面雙倍邊距問題，這個最常見，也最好處理，!important解決，比如 margin-left:10px!important; /*IE7,IE8,FF下是10PX*/; margin-left:5px;/*IE6下屬性寫的是5PX，但在顯示出來的是10px 3.清除塊display，這個可以解決浮動造成的塊，造成塊后，當DIV背景填色或填圖片的時候，會出現背景斷開或差一小塊。這種兼容出現的不太多，我做到現在，只遇到過兩次，方法是在出現兼容的DIV的CSS中寫一個display:block，或其它屬性，中文什么意思我不知道，我英語差，但能達到想要的效果，6e"Z+e%|8G#| 4.很多朋友DIV+CSS的時候，會出現，在IE的幾個瀏覽器下都好了，但是在FF出問題了，用!important又會把IE7做的不兼容，很頭疼，在想，有沒有什么方法只對FF下進行操做，我用過這個方法，感覺得是百試不爽，就是在屬性前面加符號如：*、&，￥，#，@，—，+，加過符號的屬性只有IE的瀏覽器才識別，而FF不識別，方法如下(注意有符號的屬性和沒符號的屬性的順序) height:100px;/*FF下顯示100的高*/ +height:120px;/*IE678下顯示120高*/ 5.有時候，會在布局的時候，發現，有一個DIV浮動了，接下來的一個DIV本來是要在下面顯示的，結果跑上面去了，這種情況一般在FF下面會出現，解決的辦法就是清除一下浮動，在設置過浮動的那個DIV下面加一個DIV，CSS面寫個clear:both;如下 1. "<"div styledivstyle="float:left;height:100px;width:500px;"> 2. <"divstyledivstyle="clear:both;"> 3. <"divstyledivstyle="height:100px;width=300px"> 6.再就是居中問題，這個問題在新手身上很多，主要原因是對盒子模型不夠理解，沒熟記盒子模型，如果發現你的頁面沒有局中，我現在知道的，有這幾個原因： 1.一個是沒盒子，就是BODY后的一個大DIV把所有DIV裝起來的那個，你沒寫。 2.就是你寫了，但是寬度沒用絕對寬度：而是用一個相對的寬度，想局中，必須用絕對寬度。- 7.擴展：如果我想在設計的時候，實現IE6，IE7,FF下出現三種不同的效果，比如IE6下背景紅色，IE7下藍色FF下綠色，這里，我自己試過，可以，用兼容的方法（注意順序，可以好好理解一下）。 7L&t-o7k-a1I background:red;/*FF里顯示的紅色*/ +background:blue!important;/*IE7下面顯示的藍色*/ +background:green;/*IE6下面顯示的綠色*/ IE6 IE7 IE8 FF瀏覽器的CSS兼容問題 IE6、IE7、IE8、FF瀏覽器的CSS兼容問題，本來IE6跟ff之間的兼容是很容易解決的。加上個IE7會麻煩點，IE8的出現就更頭疼了，原來hackIE7的方法又不能用了，怎么辦呢？還好，微軟提供了這樣一個代碼： > 1. <metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/> 把這段代碼放到<head>里面，在IE8里面的頁面解析起來就跟IE7一模一樣的了，所以，基本上可以無視IE8，剩下的代碼只需要這樣寫就可以了 > 1. background:#ffc;/*對firefox有效*/ > 2. *background:#ccc;/*對IE7有效*/ > 3. _background:#000;/*只對IE6有效*/ 解釋一下吧： ◆firefox能解析第一段，后面的兩個因為前面加了特殊符號“*”和“_”,firefox認不了，所以只認background:#ffc，看到的是黃色； ◆IE7前兩短都能認，以最后的為準，所以最后解析是background:#ccc，看到的是灰色； ◆IE6三段都能認，而且“_”這個只有IE6能認，所以最后解析是_background:#000，看到的是黑色已經是最簡單和最好理解的寫法了，如果你是google進來的，我可以很負責任的告訴你，這種方法是ok的，我測試過。 ◆IE8的那段兼容7的代碼我也測試過了，在我現在的windos7測試版所帶的IE8是沒問題的，以后IE8正式版出來還管不管用就不知道了。 ps：如果你發現按我這樣寫還是有問題的話，請查看一下你的html頭，看看<head>之前的內容是不是這樣的標準寫法 > 1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" > 2. > 3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > 4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 這個是現在比較規范的寫法，如果你是用dreamweaver做頁面的話，默認也是這種規范的，切記，非這種規范寫法的，兼容性不能保證。解決IE6、IE7、Firefox兼容最簡單的CSSHack 很早就在這里看到過解決方案，最后發現這個方案還是很可靠的。當然，唯一的缺點就是每一個屬性都要去Hack，但我在很多實踐中，只用‘修正’1-2個屬性就可以了。具體寫法很容易： > 1. \#someNode > 2. { > 3. position:fixed; > 4. \#position:fixed; > 5. _position:fixed; > 6. } 第一排給Firefox以及其他瀏覽器看第二排給IE7（可能以后的IE8、IE9也是如此，誰知道呢）看第三排給IE6以及更老的版本看最好的應用就是可以讓IE6也“支持”position:fixed，而且，配合這個原理，可以做到不引入JavaScript代碼（僅用IE6的expression），我這里有一個現成的頁面，CSS如下寫： > 1. \#ff-r > 2. { > 3. position:fixed; > 4. _position:absolute; > 5. right:15px; > 6. top:15px; > 7. _top:expression(eval(document.compatMode&& > 8. document.compatMode=='CSS1Compat')? > 9. documentElement.scrollTop+15: > 10. document.body.scrollTop+ > 11. (document.body.clientHeight > 12. -this.clientHeight)); > 13. } Css代碼 > 1. <style type=”text/css”> > 2. \#body { > 3. border:2px solid #00f; /*ff的屬性*/ > 4. border:2px solid #090\9; /* IE6/7/8的屬性 */ > 5. border:2px solid #F90\0; /* IE8支持 */ > 6. _border:2px solid #f00; /*IE6的屬性*/ > 7. } > 8. </style> Html代碼 1. <div id=”body”> 2. <ul> 3. <li>FF下藍邊</li> 4. <li>IE6下紅邊</li> 5. <li>IE7下綠邊</li> 6. <li>IE8下黃邊</li> 7. </ul> 8. </div> 注:css順序不能寫錯，因為ff不認識\9,\0,_寫法,所以為藍邊;\9是IE6，7，8的屬性,下面代碼并沒有重寫IE7的代碼，所以IE7下綠邊;同理,\0為ie8屬性，相當于重寫了顏色，所以IE8下為黃邊,_是ie6的屬性,重寫顏色為紅邊. div錯位/解決IE6、IE7、IE8樣式不兼容問題 IE6里DIV錯位的問題采用”FLOAT：LEFT“的DIV在IE8、IE7、都沒問題，IE6下卻向下移動，出現空白。這是因為，IE6采用的內核默認把DIV之間的距離增加了3~5個PX，所以，試試是將下移的DIV的STYLE里增加"margin-left:-5px;"或者更小。解決IE7、IE8樣式不兼容問題方法一、要在頁面中加入如下HTTP meta-tag: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 只要IE8一讀到這個標簽，它就會自動啟動IE7兼容模式，保證頁面完整展示。方法二、針對整個網站，在IIS中加入如下描述符就可以有相同的效果，當然這么做范圍更廣。 <?xml version="1.0" encoding="utf-8"?> <configuration> <system.webServer> <httpProtocol> <customHeaders> <add name="X-UA-Compatible" value="IE=EmulateIE7"> </customHeaders> </httpProtocol> </system.webServer> </configuration> 解決IE6、IE7、IE8樣式不兼容問題現在我們在做網頁的時刻總是要考慮一些瀏覽器之間的兼容問題。近期在做一個短信平臺的項目。在項目的開發過程中讓我遇到了一件頭痛的事情就是IE7與IE8不兼容。后面想了許多辦法得以解決。現共享如下：如果你的頁面對IE7兼容沒有問題，又不想大量修改現有代碼，同時又能在IE8中正常使用，微軟聲稱，開發商僅需要在目前兼容IE7的網站上添加一行代碼即可解決問題，此代碼如下： CODE: <meta http-equiv="x-ua-compatible" content="ie=7" /> 解決firefox ie6 ie7的css樣式兼容問題做主題最麻煩的就是CSS樣式兼容問題，由于各瀏覽器對ccs的不同解釋，造成本來IE7可正常顯示，但到了Firefox 、ie6等其它瀏覽器上，卻出現錯位、下沉等問題，只得在Firefox 、ie6 、ie7之間不停的切換調試，汗…最近又有兩款瀏覽器加入googleChrome和IE8,某個瀏覽器一統天下看來是沒希望了，只能盡量克服兼容問題。找到一篇解決兼容問題的文章，還是很有效的。 1 針對firefox ie6 ie7的CSS樣式現在大部分都是用!important來hack，對于ie6和firefox測試可以正常顯示，但是ie7對!important可以正確解釋，會導致頁面沒按要求顯示！找到一個針對IE7不錯的hack方式就是使用“*+html”，現在用IE7瀏覽一下，應該沒有問題了現在寫一個CSS可以這樣： \#1 { color: #333; } /* Moz */ \* html #1 { color: #666; } /* IE6 */ \*+html #1 { color: #999; } /* IE7 */ 那么在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999。 2 css布局中的居中問題主要的樣式定義如下： body {TEXT-ALIGN: center;} \#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 說明：首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容居中；對于IE這樣設定就已經可以了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個DIV里，你可以依次拆出多個div，只要在每個拆出的div里定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。 3 盒模型不同解釋. \#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- } 4 浮動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; 5 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;} 6 頁面的最小寬度 min-width是個非常方便的CSS命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把 width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個<div> 放到 <body> 標簽下，然后為div指定一個類：然后CSS這樣設計： \#container{ min-width: 600px; width:e¬xpression(document.body.clientWidth < 600? “600px”: “auto” ); } 第一個min-width是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。 7 清除浮動 .hackbox{ display:table; //將對象作為塊元素級的表格顯示 } 或者 .hackbox{ clear:both; } 或者加入:after（偽對象）,設置在對象后發生的內容，通常和content配合使用，IE不支持此偽對象，非Ie 瀏覽器支持，所以并不影響到IE/WIN瀏覽器。這種的最麻煩的 ……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden; } 8 DIV浮動IE文本產生3象素的bug 左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距. \#box{ float:left; width:800px;} \#left{ float:left; width:50%;} \#right{ width:50%; } \*html #left{ margin-right:-3px; //這句是關鍵 } HTML代碼 <DIV id=box> <DIV id=left></DIV> <DIV id=right></DIV> </DIV> 9 屬性選擇器(這個不能算是兼容,是隱藏css的一個bug) p[id]{}div[id]{} p[id]{}div[id]{} 這個對于IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用屬性選擇器和子選擇器還是有區別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標簽中有id的都是同樣式的. 10 IE捉迷藏的問題當div應用復雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發生捉迷藏的問題。有些內容顯示不出來，當鼠標選擇這個區域是發現內容確實在頁面。解決辦法：對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面結構盡量簡單。 11 高度不適應高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用 margin 或paddign 時。例： <div id=”box”> <p>p對象中的內容</p> </div> CSS： \#box {background-color:#eee; } \#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } 解決方法：在P對象上下各加2個空的div對象CSS代碼：.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。注：IE都能識別*;標準瀏覽器(如FF)不能識別*； IE6能識別*，但不能識別 !important, IE7能識別*，也能識別!important; FF不能識別*，但能識別!important; 1.區別IE和非IE瀏覽器 \#tip { background:blue; /*非IE 背景藍色*/ background:red \9; /*IE6、IE7、IE8背景紅色*/ } 2.區別IE6,IE7,IE8,FF 【區別符號】：「\9」、「*」、「_」【示例】： \#tip { background:blue; /*Firefox 背景變藍色*/ background:red \9; /*IE8 背景變紅色*/ *background:black; /*IE7 背景變黑色*/ _background:orange; /*IE6 背景變橘色*/ } 【說明】：因為IE系列瀏覽器可讀「\9」，而IE6和IE7可讀「*」(米字號)，另外IE6可辨識「_」(底線)，因此可以依照順序寫下來，就會讓瀏覽器正確的讀取到自己看得懂得CSS語法，所以就可以有效區分IE各版本和非IE瀏覽器(像是Firefox、Opera、Google Chrome、Safari等)。 3.區別IE6、IE7、Firefox (方法 1) 【區別符號】：「*」、「_」【示例】： \#tip { background:blue; /*Firefox背景變藍色*/ *background:black; /*IE7 背景變黑色*/ _background:orange; /*IE6 背景變橘色*/ } 【說明】：IE7和IE6可讀「*」(米字號)，IE6又可以讀「_」(底線)，但是IE7卻無法讀取「_」，至于Firefox(非IE瀏覽器)則完全無法辨識「*」和「_」，因此就可以透過這樣的差異性來區分IE6、IE7、Firefox 4.區別IE6、IE7、Firefox (方法 2) 【區別符號】：「*」、「!important」【示例】： \#tip { background:blue; /*Firefox 背景變藍色*/ *background:green !important; /*IE7 背景變綠色*/ *background:orange; /*IE6 背景變橘色*/ } 【說明】：IE7可以辨識「*」和「!important」，但是IE6只可以辨識「*」，卻無法辨識「!important」，至于Firefox可以讀取「!important」但不能辨識「*」因此可以透過這樣的差異來有效區隔IE6、IE7、Firefox。 5.區別IE7、Firefox 【區別符號】：「*」、「!important」【示例】： \#tip { background:blue; /*Firefox 背景變藍色*/ *background:green !important; /*IE7 背景變綠色*/ } 【說明】：因為Firefox可以辨識「!important」但卻無法辨識「*」，而IE7則可以同時看懂「*」、「!important」，因此可以兩個辨識符號來區隔IE7和Firefox。 6.區別IE6、IE7 (方法 1) 【區別符號】：「*」、「_」【示例】： \#tip { *background:black; /*IE7 背景變黑色*/ _background:orange; /*IE6 背景變橘色*/ } 【說明】：IE7和IE6都可以辨識「*」(米字號)，但IE6可以辨識「_」(底線)，IE7卻無法辨識，透過IE7無法讀取「_」的特性就能輕鬆區隔IE6和IE7之間的差異。 7.區別IE6、IE7 (方法 2) 【區別符號】：「!important」【示例】： \#tip { background:black !important; /*IE7 背景變黑色*/ background:orange; /*IE6 背景變橘色*/ } 【說明】：因為IE7可讀取「!important;」但IE6卻不行，而CSS的讀取步驟是從上到下，因此IE6讀取時因無法辨識「!important」而直接跳到下一行讀取CSS，所以背景色會呈現橘色。 8.區別IE6、Firefox 【區別符號】：「_」【示例】： \#tip { background:black; /*Firefox 背景變黑色*/ _background:orange; /*IE6 背景變橘色*/ } 【說明】：因為IE6可以辨識「_」(底線)，但是Firefox卻不行，因此可以透過這樣的差異來區隔Firefox和IE6，有效達成CSS hack。