IE與FF瀏覽器CSS相容技巧-Web標準教程

IE與FF瀏覽器CSS相容技巧-Web標準教程 一、《important 在IE6及FF中的使用》 .box1 {width:150px !important;} .box1 {width:250px;} !important是說這個設定有優先順序，IE碰到!important不會出錯只是忽略他的功能，假如後面又設定了width，IE會以最後設定的 width為準，假如後面再沒有其它設定，則會用當前這個值，也就是前面的! important那個值。比如：#test {width: 300px !important }IE與FF都顯示300PX。假如後面還有值IE就顯示後面的值，FF顯示前面有!import的那個值！ 而其它瀏覽器，則認這個important，因為有優先順序的關係，所以始終以前面設定的 width為準。 #test {width:300px;width:400px !important ;} 這句顯示的結果是IE和FF寬度都是 400PX #test {width:300px !important ;width:400px;} 這句顯示結果FF：300px IE: 400px 所以，使用!important 時，把含有!important 放到前面。 但是問題又來了，IE7已可以識別!important，請看下面！ 二、針對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 */ 原文是*+html    #1 { color: #999; } /* IE7 */ ，經本人測試在IE7下不能顯示，所以改為上面：html*     #1 { color: #999; } /* IE7 */ 那麼在firefox下字型顏色顯示為#333，IE6下字型顏色顯示為#666，IE7下字型顏色顯示為#999可以用”_” 來實現只有IE識別的CSS Hack可能有朋友想到用”_” Hack，但它們是由區別的，因為IE7中是不識別“_”的。 IE5.5，IE6 ，IE7瀏覽器都能識別； FF2.0，Opera 9，Safari 2瀏覽器不識別。 三、IE7的hack IE7 修複了很多 bug，也增加了對一些選擇符的支援，所以現在諸如 *html {} 和 html>body {} 、!important等針對 IE 隱藏或顯示的 hack 都會在 IE7 中失效。雖然 CSS Hack 不推薦使用，條件注釋才是萬無一失的過濾器，但是條件注釋只能出現在 HTML 中，CSS Hack 還是有用武之地的。Nanobot 發現了一些針對 IE7 的 CSS Hack，具體就是： >body html* * html 這三種寫法，其中前兩種都是不合法的 CSS 寫法，在標準相容瀏覽器中被被忽略，但是 IE7 卻不這麼認為。對於 >body ，它會將缺失的選擇符用全域選擇符 * 代替，也就是將其處理成了 *>body，而且不光對於 > 選擇符， ,~ 選擇符中這個現象也存在。對於 html* ，由於 html 和 * 之間沒有空格，所以也是一種 CSS 語法錯誤，但 IE7 不會忽略，而是錯誤地認為這裡有一個空格。對於第三種 * html，IE7 認為 html 前面的 DTD 聲明也是一個元素，所以 html 會被選中，這三種方法中只有這一種方法是合法的 CSS 寫法，也就是說可以通過校正器的驗證，因此也是作者推薦的 hack 用法。 IE 6 and below Use * html {} to select the html element. IE 7 and below Use * html, * html {} to select the html element. IE 7 only Use * html {} to select the html element. IE 7 and modern browsers only Use html>body {} to select the body element. Modern browsers only (not IE 7) Use html>/**/body {} to select the body element. 四、IE和FF對盒模型的解釋也不一樣，代碼說明：#test { width: 650px !important;width: 648px;padding-left:2px;background:#fff; } test 顯示的寬頻是 650px IE Box的總寬度是： width padding border margin寬度總和FF Box的總寬度就是 width的寬度， padding border margin的寬度在含在width內。 假如有BOX{WIDTH:"300"; PADDING:"5PX";}，則BOX在IE的寬度應該為：310。而在FF的寬度則是300，所 以在BOX有填充的情況下應該這樣使用BOX {WIDTH:"290"!IMPORTANT; WIDTH: "300";}，這樣子才能確保 BOX的寬度始終在300px,而不會出現被撐開的現象，而在FF裡面則不會造成浮動層填不滿的情況。 Wayping對上例子的理解： #box{ width:300px; padding:5px; background-color:#6666CC;}               // IE寬度為300px，FF為310px #BOX1 {width:290px!IMPORTANT; width: 300px; padding:5px; background-color: #999966;} // IE寬度為300px，FF為300px 補充說明：例子中存在錯誤，數值加入""有誤，比如width:"300",某些瀏覽器無法識別；例子中第二例子少了padding:5px參數。 五、ul 標籤在 Mozilla 中有 padding 值的，而在 IE 中只有 margin 有值。 設定ul{margin:0;padding:0} 六、IE 分不清繼續關係和父子關係的差別，全部都是繼續關係 Wayping：繼續關係即為繼承關係 七、FF下給 div 設定 padding 後會導致 width 和 height 增加, 但IE不會.(可用!important解決) 八、置中問題 1、垂直置中.將 line-height 設定為當前div相同的高度, 再通過 vertical-align: middle.( 注重內容不要換行.) 2、水平置中. margin: 0 auto;(當然不是萬能) 3、若需給 a 標籤內內容加上樣式, 需要設定 display: block;(常見於導航標籤) 4、FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題. 5、UL的不同表現： ul 標籤在 FF 下面預設有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見於導航標籤和內容列表) 6、作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應。 九、關於手形游標hand 只適用於 IE..IE與FF都認的話請用 cursor: pointer 此文不錯，可做備忘用·(*^__^*) 嘻嘻……     ------------------------------------------------------------------------------------------------------ 對上文的補充： 針對firefox ie6 ie7的css樣式 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 */ 原文是*+html    #1 { color: #999; } /* IE7 */ ，經本人測試在IE7下不能顯示，所以改為上面：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:expression(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屬性。