һ
 ¼ע

QQ¼

ֻһٿʼ

[CSS] IE6.7.8.FFݵ

  []
30593 websjy 2012-5-28 14:52:27
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţ¼ע

x

ǰһӣоão(_)o...ʺϲ񣬸·~~ʱ䳤ԭԴַҲˣ֪~~

ΪһܹʦվʱӦעcssʽݲͬ⣬رǶȫʹDIV CSSƵվӦøעIE6 IE7 FFCSSʽļݣȻҿܳȥֵЧ

ͨ
height: 100px;  

IE6 ר
_height: 100px;

IE6 ר
*height: 100px;  

IE7 ר
*+height: 100px;

IE7FF
height: 100px !important;

һCSS

ַֽܽм.

1, !important (ǺƼһָоȫ)

IE7!important֧, !important ֻIE6ļ.(עд.ǵøλҪǰ.)

:

  1. <style>
  2. #wrapper {
  3. width: 100px!important; /* IE7+FF */
  4. width: 80px; /* IE6 */
  5. }
  6. </style>
ƴ

2, IE6/IE77FireFox <from firefox ie6 ie7cssʽ>

*+html *html IEеıǩ, firefox ݲ֧.*+html Ϊ IE7бǩ.

:

  1. <style>
  2. #wrapper { width: 120px; } /* FireFox */
  3. *html #wrapper { width: 80px;} /* ie6 fixed */
  4. *+html #wrapper { width: 60px;} /* ie7 fixed, ע˳ */
  5. </style>
ƴ

ע:
*+html IE7ļ 뱣֤HTML

:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://w3.org/TR/html4/loose.dtd">

float պ(dzҪ!)

divʱļ಻ԣ

clear float ԭɲμ [How To Clear Floats Without Structural Markup]
´Global CSS ,Ҫպϵdiv class=clearfix ,Բˬ.

:

  1. <style>
  2. /* Clear Fix */
  3. .clearfix:after {
  4. content:".";
  5. display:block;
  6. height:0;
  7. clear:both;
  8. visibility:hidden;
  9. }
  10. .clearfix {
  11. display:inline-block;
  12. }
  13. /* Hide from IE Mac \*/
  14. .clearfix {display:block;}
  15. /* End hide from IE Mac */
  16. /* end of clearfix */
  17. </style>
ƴ


Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
 ¥| websjy 2012-5-28 14:53:36
| ʾȫ¥
2F

ݼ(൱)

1, FF¸ div padding ᵼ width height , IE.(!important)
2, .
1).ֱ. line-height Ϊ ǰ div ͬĸ߶, ͨ vetical-align: middle.( עݲҪ.)
2).ˮƽ. margin: 0 auto;(Ȼ)
3, a ǩݼ ʽ, Ҫ display: block;(ڵǩ)
4, FF IE BOX IJ쵼 2px ĻΪ floatdivie marginӱ.
5, ul ǩ FF Ĭ list-style padding . , ԱⲻҪ鷳. (ڵǩб)
6, Ϊⲿ wrapper div Ҫ߶, û overflow: hidden.Դﵽ߶Ӧ.
7, ι. cursor: pointer. hand ֻ IE.ϴ:

ݴ:Ƽģʽ

  1. /* FF */
  2. .submitbutton {
  3. float:left;
  4. width: 40px;
  5. height: 57px;
  6. margin-top: 24px;
  7. margin-right: 12px;
  8. }
  9. /* IE6 */
  10. *html .submitbutton {
  11. margin-top: 21px;
  12. }
  13. /* IE7 */
  14. *+html .submitbutton {
  15. margin-top: 21px;
  16. }
ƴ


ʲôݣ

ʹòͬFirefox IE7 IE6ͬһվҳʱ򣬻һЩݵ⣬еʾеʾڱдCSSʱջ𣬸޸⣬һȴ⡣ݾһְ취һCSSдֲ֧ͬʽ¾ͺгˣ

һ߼˼˶֪IEFFļݽʹá

ݣ磺ʺ֣Ǻǣ·

һݣIE FF ãʵҲǼݣ
height:100px;
ڶ IE6ר
_height:100px;
IE6 IE7
*height:100px;

ˣһʽֱһԶIE6 IE7 FFרõļݣĴ룬˳ܴŶ

height:100px;
*height:120px;
_height:150px;

Ҽ򵥽һ¸ԣ

FF£23FFʶ height:100px;

IE7£IE7ʶ12ԣΪڶԸ˵һԣIE7նǵ2 *height:120px;

IE6£IE6ʶԶԶȡΪԸǵǰ2ԣIE6նȡǵԡ

1 firefox ie6 ie7cssʽ

ڴ󲿷ֶ!importantݣie6firefoxԿʾie7!importantȷͣᵼҳûҪʾҵһIE7ļݷʽʹá*+htmlIE7һ£ӦûдһCSS

  1. #1 { color: #333; } /* Moz */
  2. * html #1 { color: #666; } /* IE6 */
  3. *+html #1 { color: #999; } /* IE*/
ƴ

ôfirefoxɫʾΪ#333IE6ɫʾΪ#666IE7ɫʾΪ#999

2 cssеľ

Ҫʽ£

  1. body {TEXT-ALIGN: center;}
  2. #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 ģͲͬ.

  1. #box{
  2. width:600px;
  3. //for ie6.0- w\idth:500px;
  4. //for ff+ie6.0
  5. }
  6. #box{
  7. width:600px!important
  8. //for ff
  9. width:600px;
  10. //for ff+ie6.0
  11. width /**/:500px;
  12. //for ie6.0-
  13. }
ƴ



Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| websjy 2012-5-28 14:54:40
| ʾȫ¥
3F

4 ie˫

#box{ float:left; width:100px; margin:0 0 0 100px; //֮IE200pxľ display:inline; //ʹ}

ϸ˵һblock,inlineԪ,BlockԪصص:Ͽʼ,߶,,и,߾඼Կ(Ԫ);InlineԪصص:Ԫͬһ,ɿ(ǶԪ);

#box{ display:block; //ΪǶԪģΪԪ display:inline; //ʵͬһеĵЧ diplay:table;

5 IEȺ͸߶ȵ

IEϵmin-壬ʵwidthheightminʹʹˣֻÿȺ͸߶ȣֵͲ䣬ֻmin-widthmin-heightĻIEûÿȺ͸߶ȡҪñͼƬDZȽҪġҪ⣬

  1. #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
ƴ

6 ҳС

min-widthǸdzCSSָԪСҲСijȣܱ֤ŰһֱȷIEϵʵϰ widthСʹΪһIEҲã԰һ<div> ŵ <body> ǩ£ȻΪdivָһࣺ
ȻCSSƣ

  1. #container{
  2. min-width: 600px;
  3. width:expression(document.body.clientWidth < 600? 600px: auto );
  4. }
ƴ

һmin-widthģ2еwidthʹJavascriptֻIEϵãҲHTMLĵ̫档ʵͨJavascriptжʵСȡ

7

.box{
display:table;
//ΪԪؼıʾ
} home.

.box{
clear:both;
} home.

߼:afterα,ڶݣͨcontentʹãIEִ֧α󣬷Ie ֧֣ԲӰ쵽IE/WINֵ鷳

  1. #box:after{
  2. content: .;
  3. display: block;
  4. height: 0;
  5. clear: both;
  6. visibility: hidden;
  7. }
ƴ

8 DIVIEı3صbug home.

߶󸡶ұ߲ⲹ߾λұ߶ڵı3pxļ.

  1. #box{
  2. float:left;
  3. width:800px;}
  4. #left{
  5. float:left;
  6. width:50%;}
  7. #right{
  8. width:50%;
  9. }
  10. *html #left{
  11. margin-right:-3px;
  12. //ǹؼ
  13. }
ƴ

HTML
  1. <DIV id=box>
  2. <DIV id=left></DIV>
  3. <DIV id=right></DIV>
  4. </DIV>
ƴ

9 ѡ(Ǽ,cssһbug)

p[id]{}div[id]{}
p[id]{}div[id]{}

IE6.0IE6.0µİ汾,FFOPera

ѡѡ,ѡķΧʽ˵С,ѡķΧȽϴ,p[id],pǩidĶͬʽ.


Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| websjy 2012-5-28 14:56:17
| ʾȫ¥
4F

10 IE׽Բص

divӦøӵʱÿһЩӣDIVʱ׷׽Բص⡣
ЩʾѡǷȷʵҳ档
취#layoutʹline-height ߸#layoutʹù̶ߺͿҳṹ򵥡

11 ߶ȲӦ

߶ȲӦǵڲĸ߶ȷ仯ʱ߶ȲԶеڣرǵڲʹ
margin paddign ʱ

  1. <div id=box>
  2. <p>pе</p>
  3. </div>
ƴ

CSS

  1. #box {background-color:#eee; }
  2. #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
ƴ

P¸2յdivCSS룺.1{height:0px;overflow:hidden;}ΪDIVborderԡ

IEҲIE²ʾ

*:lang(zh) select {font:12px !important;} /*FF,OPɼ*/
select:empty {font:12px !important;} /*safariɼ*/


selectѡڶMACsafariеġ

IE7ʶ

*+html {}

ҪֻIE7ʽʱͿԲݡ

IE6IE6ʶ

* html {}

طҪرעܶдIE6ļʵIE5.xͬʶݡʶ
html/**/ >body select {}
һͬ

IE6ʶ

select { display /*IE6ʶ*/:none;}

ҪͨCSSעͷֿһֵðǰ

IE6IE5ʶ

select/**/ { display /*IE6,IE5ʶ*/:none;}

һ䲻ͬѡ뻨֮һCSSע͡

IE5ʶ

select/*IE5ʶ*/ { display:none;}

һһȥעֻ͡IE5ʶ

ģͽ

selct {width:IE5.x; voice-family :""}""; voice-family:inherit; width:ȷ;}

ģ͵ͨ!importantġҪȷ


  1. select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
ƴ

FirefoxУӼΪʱôĸ߶Ⱦ޷ȫİסӼôʱļԸһζ壬ôͿԽ

ʡԺ

  1. select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
ƴ

ԽȺеĽصֵ֣ʡԺŽβܺõһֻĿǰFirefox֧֡

ֻOperaʶ

@media all and (min-width: 0px){ select {} }

Opera趨

϶дCSSеһЩݣѭȷıǩǶ(div ul li Ƕ׽ṹϵ)ԼʹüݵƵʣҪһҳҪܶļֶ)ܶҲһݶҲ÷dzãЩֲļ⣬ϣѼԵҲһļֹЩедCSSͨرʽҲедHTMLеͨӻǵҪIJʽ

IE5.xĹֻIE5.xɼ
@media tty {
i{content:"";/*" "*/}} @import ie5win.css; /*";}
}/* */

IE5/MACĹһò
/**//*/
@import "ie5mac.css";
/**/

IEעͣ˾ע͵Ӧ DZȽĶݵĽ취Ҫݵĵطŵһļ棬汾ϵʱͿԵǸݵʽʹdz㣬ҶCSSԸϸĹ۲쵽ǷбҪʹüݣܶ£ұдCSSȫݶдһCSSļʱʱ⣬ôݾôݣдʱͻ᲻ԾĿǷбҪݣȼ CSSȰCSSĶܵIJҪݣúٵļݾúܹܶԺʱDzǺгɾ͸أ֪ôѡ˰ɡǺ

IEif ԼʹòοƪIEע
Only IE
еIEʶ

ֻIE5.0ʶ
Only IE 5.0+
IE5.0IE5.5ʶ

IE6ʶ
Only IE 7/-
IE6ԼIE6µIE5.xʶ
Only IE 7/-
IE7ʶ

Css ĶijЩĻķȻͨܶļݣܶ!important ֳᷢܲģվǵCSSIE6,Ie7,Firefox,Safari,OperaȱDzǺĽǿƸӵģʹõļ ٵÿʵҪ֪IE Firefox ôIJгҵһķȫǺгġҪΪ˼ݵİ취һУDzǼݵū

div ul li Ƕ˳

ֻһ򡣾<div><ul><li>ǹϵҵľ<div>棬<ul>Ȼ<li>Ȼ<li>ֿǶ<div>ʲôģDzǶ׺ܶණĹʱЩùģļ϶Ͳˣ<div><li><ul>ʱᷢļ϶ʮѿƣһ£IE6IE7ƾնһЩࡣܶһУ϶ûˣǰֿ˺ܴһ飬ȻԸıIEMarginȻFirefoxPaddingԱʹʾЧƣCSSóޱȣ㲻ò࿼ǸܳⲹȴʩȻ֪ǧƪһǣᷳҪ

Ƕд

ѭǶ׷ʽ<div><ul><li></li></ul></div> ȻCSS ul {Margin:0pxadding:0px;list-style:none;}list-style:noneDz<li>ǵǰʾԲֵĿ¼͵ıǣΪIEFirefoxʾĬЧЩһҪκֽţIE6IE7FirefoxʾĶ(࣬࣬߶ȣ)ͼûʲôˣҲϸĵijһʱ̷һصIJ𣬵ѾˣҪͨƬCSSǵʾˣԸ⣬ԽһطּͨݿӦֵطҪظڲͬĵطԲͬļݷʽCķul.class1, ul.class2, ul.class3 {xxx:xxxx}ķʽҪݵĵطͳһݡһ°ɣҲҪǶˣȻDiv+CSSķʽ㼸ôǶ׾ôǶףǰĹ㽫ɺܶ࣬Ӷ°빦


1 +3
Сǿ + 3 ܸ!

鿴ȫ

Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
б

ֹ

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ-̳ ( ICP19023897-2 )

GMT+8, 2022-12-1 17:56

ٻظ ض б