ie css 區別

1. ie7,ie6 div+css出現寬度定義不同% l7 ^+ E# _& f/ b. c+ A1 U

在寬度定義上出現寬度的解釋不同,IE7寬度在IE6上要寬一些,,正是這個原因網頁可能會出現溢出問題, 還好這個問題可以通過更改數值或者修改一下百分比解決.2. ie7.0修複了!important這個bug。  p. Z( F- W) s& Z

先前由於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？

7 I( [" N9 _$ l4 T; A' k3 t, |2 p3. Box Model的改變3 h7 ^' S( O, b5 F7 |/ g- d+ p+ g

在IE7中，為了適應CSS2.1 box model修改了溢出的行為。5 F, a- I( I8 U! I  H' T( X1 A

4. ie7.0中一些CSS filter將不再可用

% w$ k% S. z8 N+ }8 H4 T# pIE7中修改了許多潛在解析錯誤，這些可能會阻止filter在以前的IE版本中正常工作。如：*HTML filter，底線filter和/**/注釋filter等等。: s9 T4 c# X# x2 V

5. ie7.0對很多不規範的css不再支援，對js文法要求更嚴格規範。1 U6 L7 {4 s* X% i

很多在IE6下正常顯示的js頁面，在IE7下均不能正常顯示，並且還沒有提示錯誤。ie7.0對js文法要求更嚴格規範，只是這個規範似乎並沒有說明，也沒有明白的告訴大家，他們是怎麼“規”怎麼“範”的。; P5 i; a* Y3 s3 G

以上是我概括性的理解，下面的就是關鍵了：& R, y6 S' M) r

. M+ x) B, j) `/ r3 @1 C4 f( y- |

 

一、CSS HACK   0 v3 v, _9 B% n! a; Y- _! f8 | & |$ P. P  /+ L     以下兩種方法幾乎能解決現今所有 HACK.4 r: t$ p; B" C* c' ^& R ' e" u5 S+ E0 z; K' h+ M0 |      1, !important - Z" v# ^1 a5 L" G! {, b 7 H$ r2 k4 p! f+ T7 k8 I     隨著 IE7 對 !important 的支援, !important 方法現在只針對 IE6 的 HACK。(注意寫法。記得該聲明位置需要提前。), t! p5 k. j) u9 k      〈style〉, ]/ R6 Z; b0 u4 h/ ~. D      #wrapper. o. p' [: [( u/ X: _" Q& z      {& ~/ R' @- p- h+ A      width: 100px!important; /* IE7+FF */ / j" [! B$ L1 a+ [' x     width: 80px; /* IE6 */ " k; Y4 U& D; v8 E     }5 r2 f. U5 k9 v( G" `      〈/style〉! [9 E. s8 w5 o7 d9 T! T+ e( U & W3 t" ~2 _- A3 ^+ m     2, IE6/IE77對FireFox # y0 R( g# S# d7 K; {# @- T6 y. H: s. Q' s      *+html 與 *html 是 IE 特有的標籤, firefox 暫不支援.而*+html 又為 IE7 特有標籤. + y3 F% Y: J9 f* s7 y# z/ r# X     〈style〉 " |- M8 q7 H7 s: u# R     #wrapper $ d* }' b( H1 Y6 c0 [7 s3 M% @8 h     {+ P1 A4 m# F1 _( `0 |      #wrapper { width: 120px; } /* FireFox */ 6 F9 k. g4 /6 O8 Q) @% K+ T2 D3 T; F     *html #wrapper { width: 80px;} /* ie6 fixed */ 7 _# e" G4 |6 B! t" e1 d7 h: W     *+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */, J. /6 ?0 U) Y' j      }( R4 I. s; ]& s% y# m      〈/style〉 + _* O% S* z" s7 l1 l( m. b/ B! r. C8 w* r) }7 m     注意: & [( e) S% u8 Q& }0 F: Z3 O     *+html 對IE7的HACK 必須保證HTML頂部有如下聲明：1 i. o2 L  H: J! u  o      〈!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN“　“http://www.w3.org/TR/html4/loose.dtd“〉8 `  C3 r- e2 F  R; H" G# b8 c 4 x9 K5 M+ s* n+ L& ?      二、萬能 float 閉合(非常重要!) 5 O+ W* D& d. |$ ~1 c$ G. _6 a1 t& z1 L  P* {      關於 clear float 的原理可參見 [How To Clear Floats Without Structural Markup] * S& E7 J" J" g# z% r     將以下代碼加入Global CSS 中,給需要閉合的div加上 class=“clearfix“ 即可,屢試不爽。 . Q9 @0 f  Y: d3 I4 @     〈style〉( s: @* d. j- _% g4 w9 s- A      /* Clear Fix */ + o- F8 I* Y4 a+ Z! f4 o# U     .clearfix:after  [1 P2 ~) `- Y" W: Q3 J      {, |$ D/ |& f5 y5 A& R      content:“.“;: @* o0 Y5 X) z2 g1 /      display:block; 7 D' b3 O3 p5 X! |3 x9 l) a     height:0;: h+ M) ?+ O8 q9 R$ |! ~; b      clear:both; 8 m2 w$ h, U1 ^" H     visibility:hidden;" M7 o" q  t6 /      } 2 w: G6 P. I' /- m. G" M     .clearfix1 }. R4 y9 a4 s: n8 J      {1 I$ F) Q* z4 L) n      display:inline-block; ' d4 }( i3 `! F, J     } - u2 J2 h! ]8 S$ R  l6 A     /* Hide from IE Mac */ : C( P# /5 r3 @# h2 y/ ~     .clearfix {display:block;} * O3 `& V4 `; B     /* End hide from IE Mac */ - ^* B) F  M, W/ K8 [/ /& q     /* end of clearfix */" k4 x1 @' x. O) u2 ]      〈/style〉 - X$ }% H7 Z1 I/ B+ t7 o 4 z3 L( `* a3 N/ f* f     三、其他相容技巧6 y. l3 t# p) G* L0 t* e   H% `" A4 L/ /; p8 H      1, FF下給 div 設定 padding 後會導致 width 和 height 增加, 但IE不會。(可用!important解決) 0 B) c: t6 x: a& i 9 o9 l+ p0 /1 t3 ]$ y% u' C     2, 置中問題0 W# a# ~2 I! j% /8 A1 a ' P% Q, w  a: L, X% l      1).垂直置中.將 line-height 設定為 當前 div 相同的高度, 再通過 vertical-align: middle。( 注意內容不要換行)2 n% u' a7 x8 i* B9 n      2).水平置中. margin: 0 auto;(當然不是萬能)   }0 T( e  c$ G+ o- u7 L     3, 若需給 a 標籤內內容加上 樣式, 需要設定 display: block;(常見於導航標籤) ! C) S3 v0 t3 P; _: c     4, FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.: p1 K4 z) T% ]1 v( L      5, ul 標籤在 FF 下面預設有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見於導航標籤和內容列表)1 A2 h9 u6 V$ J0 ]      6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應. 8 j" p4 H# q6 H0 j8 K& G; A     7, 關於手形游標. cursor: pointer. 而hand 只適用於 IE.5 H, ~0 H1 c% k# a1 h6 f7 a ' Q* l; N/ P1 G3 S2 y* o$ c

 

  c2 F- a4 m1 z8 g

1、對css縮寫的支援問題：   $ f* x5 a% n: N" j/ v6 v7 _　　不論是ie 還是ff對css的縮寫都有一小點問題，比如:border: 0xp solid #fff;兩個瀏覽器支援都沒有問題，但如果四個邊的magin不同情況下，就不能用這種縮寫了，無論是ie還是ff又會出現邊界解釋錯誤，而導致頁面變形。$ n. m$ O. n4 W9 ^! c& E4 B) E5 R 正確縮寫：6 N; j7 o7 [/ V9 V0 H! L border-width:0px 1px 2px 3px; 4 u) W1 l0 i, y" w# Oborder-style:solid; ! i: V. Q/ L7 A; ~& I6 i3 [+ V8 N9 Fborder-color:#fff;   Z& `" q- g$ ~% k2、magin padding 等預設值 9 ?' q- ~2 K$ w; [. p7 Y* L　　ie對於css的magin padding 等預設值為0px，但ff卻不一樣，為了保持外觀的統一性，即使padding為0你也要寫上，以免ff在瀏覽中的錯位。 # M% /8 E' ^9 V. L" R" U" F& y4 Y7 }- y; C  v5 Q1 Z. n* r5 u. } 3、置中) S) e, B4 ~- V  Z 　　在IE裡用body {text-align: center;}就可以置中對齊.到了firefox裡總是在左邊。但是如果加了float: right;還能到右邊就是不能到中間，FF下面設定容器的左右外補丁為auto就可以了。 * f. B* ^7 w2 X! l! emargin-right:auto;2 ~% E# G. {$ ?. x/ W0 {' B margin-left:auto;, p% ]( x: H) `! M' ? 比如: margin:0 auto; 9 m% M. W" E, ?  C; Y% Q. B) I2 B與臭蟲為友——瀏覽器補救辦法，臭蟲以及解決方案（第一部分）* M  J( T& c8 @. b3 k/ @ http://realazy.org/blog/2006/07/29/working-with-buggy-browsers-1 ' `) s/ L; N* q/ i( E====未整理============================================================= 0 Y/ U% b3 v/ G/ j5 P0 ~" UFirefox與IE在CSS樣式中的差異1 針對firefox ie6 ie7的css樣式 6 u. _4 i2 X1 ?! O9 x, N 現在大部分都是用!important來hack，對於ie6和firefox測試可以正常顯示， 3 z# l/ K+ Q* G3 w. c* d+ ?4 D但是ie7對!important可以正確解釋，會導致頁面沒按要求顯示！找到一個針 4 n: k- g/ k- ~對IE7不錯的hack方式就是使用“*+html”，現在用IE7瀏覽一下，應該沒有問題了。 ( x7 /7 [  ^+ N0 w現在寫一個CSS可以這樣： 4 n$ /; ]5 ]+ a5 }" c . N* d/ V! p7 H+ b, p% [! C#1 { color: #333; } /* Moz */ : b! T% f- |' p( j$ u& b * html #1 { color: #666; } /* IE6 */ 8 ?3 |# i' t7 D5 ^9 T *+html #1 { color: #999; } /* IE7 */ " b. @2 L; p' X* ?% Z 那麼在firefox下字型顏色顯示為#333，IE6下字型顏色顯示為#666，IE7下字型顏色顯示為#999。 7 a7 _7 Z7 h* O/ [! b2 v, G( P% c( ?$ m* j 2 css布局中的置中問題 5 i" /5 V1 Z/ A8 `3 M* w主要的樣式定義如下：6 Q+ P0 m- [. T/ E- W* T6 D ( K' e; U& y" E; v8 E, Hbody {TEXT-ALIGN: center;} 9 R' E0 D1 G, |- F9 U( Y#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 9 i' }! @* G8 C說明： " Q& R; {3 s/ w$ v* n; S/ X  F& d/ G首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容置中；對於IE這樣設定就已經可以了。- ^7 d# I6 g8 U$ i. p- D  R0 v 但在mozilla中不能置中。解決辦法就是在子項目定義時候設定時再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ” 1 I4 Q- O8 W8 }1 t需要說明的是，如果你想用這個方法使整個頁面要置中，建議不要套在一個DIV裡，你可以依次拆出多個div， " ~* O  `- C, @* u2 l: K( ~只要在每個拆出的div裡定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。% z4 ], _! ^- @6 J) l ' t. j( k; l6 H3     盒模型不同解釋.4 V8 Z: g; w4 w1 S, [  O+ /; C : `" Q! h# b4 {4 p  D* K$ w1 j#box{      width:600px;           //for      ie6.0-      w/idth:500px;          //for     ff+ie6.0} 5 U' N( j+ g% S2 h4 S& C; G#box{       width:600px!important               //for ff       width:600px;           //for     ff+ie6.0       width /**/:500px;          //for      ie6.0-} % i- F5 X& Z, u( n6 {( w9 ^$ j: ]  u3 Y# W 4 浮動ie產生的雙倍距離 ; m3 b! X0 C+ r! y3 n: E) M   w% N8 D6 E9 A: |, h- [# F7 a#box{      float:left;      width:100px;      margin:0 0 0 100px;     //這種情況之下IE會產生200px的距離      display:inline;      //使浮動忽略}0 u, H* _% v$ w/ H) _ 這裡細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,...不可控制(內嵌元素); # u1 {% T5 @4 /  |! /& ]; I7 y 4 z7 x$ L4 C) e! p#box{      display:block; //可以為內嵌元素類比為塊元素      display:inline; //實現同一行排列的的效果      diplay:table;' [' c% g, V9 e : s% G2 |- h; x$ w' y2 V9 O; ~5 IE與寬度和高度的問題 & Y: J3 R4 F+ /1 a: _- H( v, j, o5 g- V3 q* @0 J5 G/ i; M3 Y. o IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，* a# v% G1 l- z+ P  S9 t 正常的瀏覽器裡這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等於沒有設定寬度和高度。4 l- r% p& ?6 q: n2 L 比如要設定背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣： 0 w. p' A5 H4 K# {#box{       width: 80px;       height: 35px;}html>body #box{       width: auto;       height: auto;       min-width: 80px;       min-height: 35px;} 0 K1 b  U$ T! j8 a; U6 ^! r. S) e$ s; b* x7 O, _ 6 頁面的最小寬度$ K; k4 m/ i' m2 v* A, X 2 `. G, L* D* I, D min-width是個非常方便的CSS命令，它可以指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得這個， * J' x. Z5 j6 I$ D而它實際上把width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個<div> 放到 <body> 標籤下，然後為div指定一個類： ) E% Y, _& w( X) W9 `; o) D然後CSS這樣設計： # d) Y4 ^+ b# e# K% T5 O' R! k: /#container{     min-width: 600px;     width:expression(document.body.clientWidth < 600? "600px": "auto" );} 4 D* `9 a8 q5 q6 n$ }第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。' e7 s% E- X  ^1 s' _! ` 9 O- G/ J8 m, l, Q: R( G& t7 I7 清除浮動 $ C& C5 f9 M8 [. S- ~+ V 2 G9 b1 i7 T3 u' e.hackbox{          display:table; //將對象作為塊元素級的表格顯示}或者.hackbox{           clear:both;}' d# C& c* K8 w! d 或者加入:after（偽對象）,設定在對象後發生的內容，通常和content配合使用，IE不支援此偽對象，非Ie 瀏覽器支援，) G3 X$ m: l* k% P% `; / 所以並不影響到IE/WIN瀏覽器。這種的最麻煩的......#box:after{       content: ".";        display: block;       height: 0;        clear: both;        visibility: hidden;} 1 T7 Q* G7 C3 l; F; g: S  v/ l4 |& k* e; J7 N) ~8 N 8 DIV浮動IE文本產生3象素的bug ! t5 m/ h9 e6 ?4 f; ^" f  I/ [9 e( y+ b 5 C/ ]$ Y8 `0 N5 A# I* T( N6 y左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距. 7 |: G- Q% P# t) Q% m' N; Y" Z' B& l7 u8 o! V4 }/ u7 U1 X #box{       float:left;       width:800px;}#left{       float:left;       width:50%;}#right{       width:50%;}*html #left{       margin-right:-3px;      //這句是關鍵} 8 b  o8 S* L3 h5 G      HTML代碼<div id="box">       <div id="left"></div>      <div id="right"></div></div>% F6 |4 r- i3 |  T, t * n, K( r  j5 _' E7 B0 d 9 屬性選取器(這個不能算是相容,是隱藏css的一個bug' n! h  U( H5 ^/ }2 T : m6 F1 _# R. [; `& R" b p[id]{}div[id]{}. u9 i: d8 A& Y* ^% /9 {& t 這個對於IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用7 [, C* _. E# K% A5 Y/ j2 R6 z 屬性選取器和子選取器還是有區別的,子選取器的範圍從形式來說縮小了,屬性選取器的範圍比較大,如p[id]中,所有p標籤中有id的都是同樣式的. $ B' U" g. |3 _8 S5 q7 ^: o  N; v * o, l1 ^- j0 ~% j/ h( j4 O10 IE捉迷藏的問題 # T2 h1 A1 }! h  X$ Y    ! b! }8 `7 Q  u! P       當div應用複雜的時候每個欄中又有一些連結，DIV等這個時候容易發生捉迷藏的問題。 ! A# g! I: f8 `, m% ~' n5 u1 {有些內容顯示不出來，當滑鼠選擇這個地區是發現內容確實在頁面。# D/ Y! ^% u& p5 r5 [% z$ K9 p 解決辦法：對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結構盡量簡單。 ' n4 Y2 j) [1 ]9 _! V3 t) }9 O) G# k2 { 11 高度不適應 / F. {8 ?* f6 c' a7 k. ^     : R1 F/ e0 X* ]2 R& ^- p! o7 X5 D        高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用 ) |( p6 i* @2 o; V2 vmargin 或paddign 時。 / C9 d/ C1 b$ m  U. n0 [例：7 a* Q: a* Y7 o) Q5 ^7 g/ /       <div id="box"> 3 j! F# e8 [( s1 }        <p>p對象中的內容</p> # v4 W' u0 e$ O" R% x, k: j9 F      </div> 4 Q4 ^5 n3 S! G% g CSS：#box {background-color:#eee; }       0 O  t6 m- l$ x* b #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }$ P$ h5 ~2 t1 [& M/ }3 X% Z9 x 解決方案：在P對象上下各加2個空的div對象CSS代碼：.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。 8 ]: /0 @$ N5 N! M/ F1 e" T6 T, u6 N