ie6和火狐樣式相容詳解?

DIV+CSS解決IE6，IE7，IE8，FF相容問題1.IE8下相容問題，這個最好處理，轉化成IE7相容就可以。在頭部加如下一段程式碼，然後只要在IE7下相容了，IE8下面也就相容了：1. 2.2.flaot浮動造成IE6下面雙倍邊距問題，這個最常見，也最好處理，!important解決，比如margin-left:10px!important;/*IE7,IE8,FF下是10PX*/;margin-left:5px;/*IE6下屬性寫的是5PX，但在顯示出來的是10px3.清除塊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. 2. 3. 6.再就是居中問題，這個問題在新手身上很多，主要原因是對盒子模型不夠理解，沒熟記盒子模型，如果發現你的頁面沒有局中，我現在知道的，有這幾個原因：1.一個是沒盒子，就是BODY後的一個大DIV把所有DIV裝起來的那個，你沒寫。2.就是你寫了，但是寬度沒用絕對寬度：而是用一個相對的寬度，想局中，必須用絕對寬度。-7.擴充套件：如果我想在設計的時候，實現IE6，IE7,FF下出現三種不同的效果，比如IE6下背景紅色，IE7下藍色FF下綠色，這裡，我自己試過，可以，用相容的方法（注意順序，可以好好理解一下）。7L&t-o7k-a1Ibackground: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. 把這段程式碼放到裡面，在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頭，看看之前的內容是不是這樣的標準寫法1. 4. 這個是現在比較規範的寫法，如果你是用dreamweaver做頁面的話，預設也是這種規範的，切記，非這種規範寫法的，相容性不能保證。解決IE6、IE7、Firefox相容最簡單的CSSHack很早就在這裡看到過解決方案，最後發現這個方案還是很可靠的。當然，唯一的缺點就是每一個屬性都要去Hack，但我在很多實踐中，只用‘修正’1-2個屬性就可以了。具體寫法很容易：1. #someNode2. {3. position:fixed;4. #position:fixed;5. _position:fixed;6. }第一排給Firefox以及其他瀏覽器看第二排給IE7（可能以後的IE8、IE9也是如此，誰知道呢）看第三排給IE6以及更老的版本看最好的應用就是可以讓IE6也“支援”position:fixed，而且，配合這個原理，可以做到不引入JavaScript程式碼（僅用IE6的expression），我這裡有一個現成的頁面，CSS如下寫：1. #ff-r2. {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.clientHeight12. -this.clientHeight));13. }Css程式碼1. Html程式碼1.

2.
    3.
  • FF下藍邊
    • 4.
  • IE6下紅邊
    • 5.
  • IE7下綠邊
    • 6.
  • IE8下黃邊
    • 7.
8.
注: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: 只要IE8一讀到這個標籤，它就會自動啟動IE7相容模式，保證頁面完整展示。方法二、針對整個網站，在IIS中加入如下描述符就可以有相同的效果，當然這麼做範圍更廣。 解決IE6、IE7、IE8樣式不相容問題現在我們在做網頁的時刻總是要考慮一些瀏覽器之間的相容問題。近期在做一個簡訊平臺的專案。在專案的開發過程中讓我遇到了一件頭痛的事情就是IE7與IE8不相容。後面想了許多辦法得以解決。現共享如下：如果你的頁面對IE7相容沒有問題，又不想大量修改現有程式碼，同時又能在IE8中正常使用，微軟聲稱，開發商僅需要在目前相容IE7的網站上新增一行程式碼即可解決問題，此程式碼如下：CODE: 解決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 ffwidth:600px;//for ff+ie6.0width /**/: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指定一個類：然後CSS這樣設計：#container{min-width: 600px;width:e&not;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程式碼
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 時。例：

p物件中的內容

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、Firefox4.區別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。

相關問題答案

Have any Question?

Let us answer it!