0
盒模型,兼容性,hasLayout               2011-04-19
• 拔赤 淘宝前端开发工程师 http://jayli.github.com
Hack !
#box {  color:black; /*firefox*/  color:red9; /*所有ie*/  *color:blue; /*ie7*/  _color:green; /*ie6*/}
CSS Basic Box Model
#box {  border:20px solid red;  padding:20px;  width:100px;  height:100px;          <div id=“box”>}                       ...
Firefox with W3C box layout
IE with W3C box layout
IE with W3C box layout
What about IE with Quirks Mode?
IE with Quirks box layout
指定 Doctype!<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  4.01//EN" "  http://www.w3.org/TR/html4/strict.dtd">             <!DOC...
IE6 Double Margin
float:leftmargin-left:100px               !IE6            float:left            margin-left:100px   IE6
This is a bug!
float:leftmargin-left:100px                    Fix thisdisplay:inline         bug
IE hasLayout
div#box {  background:red;  filter:alpha(opacity=50);}<!DOCTYPE html>…<div id=“box”>  text</div>
Filter is ok in IE8Filter dosn’t work in IE6/7
div#box {  background:red;  filter:alpha(opacity=50);}<!DOCTYPE html>…<div id=“box”>  text            在IE6/7下没有           ...
没有 hasLayout 的元素上    Filter 无作用
Why?
降低渲染压力
默认不具有 hasLayout     • div     • span
激活元素的 hasLayout   •   position   •   float   •   width(!auto)   •   height(!auto)   •   zoom   •   overflow
div#box {  background:red;  filter:alpha(opacity=50);  height:19px;}                   让div具有                   hasLayout<...
Filter is ok in IE8Filter is ok in IE6/7
Warning !!!
hasLayout 元素呈现为      ”矩形”
I want this !
#pic {  float:left;width:50px;height:50px;}#content {  border:1px solid blue;  background:yellow;height:100%;}<div>  <div ...
It’s correct in Firefox 3.6    It’s correct in IE8
It’s incorrect in IE7It’s incorrect in IE6
#pic {  float:left;width:50px;height:50px;}#content {  border:1px solid blue;  background:yellow;height:100%;}         hei...
#pic {  float:left;width:50px;height:50px;}#content {             IE6/7下 #content  border:1px solid blue; 显示为矩形  backgro...
#pic {  float:left;width:50px;height:50px;}#content {  border:1px solid blue;  background:yellow;height:100%;}            ...
It’s correct in IE7It’s correct in IE6
Margin Overlap
Rules•   水平margin不重叠•   浮动元素上下margin不重叠(float)•   飘动元素上下margin不重叠(position)•   常规折行上下margin重叠
#wrapper {  width:500px;}#wrapper p{  width:100px;margin:50px;float:left;}<div id=“wrapper”>  <p></p>  <p></p>  …</div>
margin:50px100px        margin:50px浮动元素上下margin不重叠
#wrapper {  width:500px;}                        如果去掉浮动?#wrapper p{  width:100px;margin:50px;float:left;}<div id=“wrapper”...
margin:50px无浮动/飘动元素上下margin重叠
More & More…
秘籍?
知己知彼,百战不殆!
战争是持久的,胜利是我们的!
鉴定信念,战胜 IE6!
ref• http://htmlhelp.com/tools/validator/docty  pe.html• http://www.positioniseverything.net/explor  er/floatIndent.html• ...
box model
box model
Upcoming SlideShare
Loading in...5
×

box model

1,874

Published on

盒模型_兼容性问题_hasLayout

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,874
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
125
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Transcript of "box model"

  1. 1. 盒模型,兼容性,hasLayout 2011-04-19
  2. 2. • 拔赤 淘宝前端开发工程师 http://jayli.github.com
  3. 3. Hack !
  4. 4. #box { color:black; /*firefox*/ color:red9; /*所有ie*/ *color:blue; /*ie7*/ _color:green; /*ie6*/}
  5. 5. CSS Basic Box Model
  6. 6. #box { border:20px solid red; padding:20px; width:100px; height:100px; <div id=“box”>} <p>#box</p>#box p { </div> width:100%; height:100%;}
  7. 7. Firefox with W3C box layout
  8. 8. IE with W3C box layout
  9. 9. IE with W3C box layout
  10. 10. What about IE with Quirks Mode?
  11. 11. IE with Quirks box layout
  12. 12. 指定 Doctype!<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML>
  13. 13. IE6 Double Margin
  14. 14. float:leftmargin-left:100px !IE6 float:left margin-left:100px IE6
  15. 15. This is a bug!
  16. 16. float:leftmargin-left:100px Fix thisdisplay:inline bug
  17. 17. IE hasLayout
  18. 18. div#box { background:red; filter:alpha(opacity=50);}<!DOCTYPE html>…<div id=“box”> text</div>
  19. 19. Filter is ok in IE8Filter dosn’t work in IE6/7
  20. 20. div#box { background:red; filter:alpha(opacity=50);}<!DOCTYPE html>…<div id=“box”> text 在IE6/7下没有 hasLayout</div>
  21. 21. 没有 hasLayout 的元素上 Filter 无作用
  22. 22. Why?
  23. 23. 降低渲染压力
  24. 24. 默认不具有 hasLayout • div • span
  25. 25. 激活元素的 hasLayout • position • float • width(!auto) • height(!auto) • zoom • overflow
  26. 26. div#box { background:red; filter:alpha(opacity=50); height:19px;} 让div具有 hasLayout<!DOCTYPE html>…<div id=“box”> text</div>
  27. 27. Filter is ok in IE8Filter is ok in IE6/7
  28. 28. Warning !!!
  29. 29. hasLayout 元素呈现为 ”矩形”
  30. 30. I want this !
  31. 31. #pic { float:left;width:50px;height:50px;}#content { border:1px solid blue; background:yellow;height:100%;}<div> <div id=“pic”></div> <div id=“content”>long text…</span></div>
  32. 32. It’s correct in Firefox 3.6 It’s correct in IE8
  33. 33. It’s incorrect in IE7It’s incorrect in IE6
  34. 34. #pic { float:left;width:50px;height:50px;}#content { border:1px solid blue; background:yellow;height:100%;} height触发了#content 的hasLayout<div> <div id=“pic”></div> <div id=“content”>long text…</span></div>
  35. 35. #pic { float:left;width:50px;height:50px;}#content { IE6/7下 #content border:1px solid blue; 显示为矩形 background:yellow;height:100%;} height触发了#content 的hasLayout<div> <div id=“pic”></div> <div id=“content”>long text…</span></div>
  36. 36. #pic { float:left;width:50px;height:50px;}#content { border:1px solid blue; background:yellow;height:100%;} 样式定义在wrapper上<div style=“background:yellow”> <div id=“pic”></div> <div id=“content”>long text…</span></div>
  37. 37. It’s correct in IE7It’s correct in IE6
  38. 38. Margin Overlap
  39. 39. Rules• 水平margin不重叠• 浮动元素上下margin不重叠(float)• 飘动元素上下margin不重叠(position)• 常规折行上下margin重叠
  40. 40. #wrapper { width:500px;}#wrapper p{ width:100px;margin:50px;float:left;}<div id=“wrapper”> <p></p> <p></p> …</div>
  41. 41. margin:50px100px margin:50px浮动元素上下margin不重叠
  42. 42. #wrapper { width:500px;} 如果去掉浮动?#wrapper p{ width:100px;margin:50px;float:left;}<div id=“wrapper”> <p></p> <p></p> …</div>
  43. 43. margin:50px无浮动/飘动元素上下margin重叠
  44. 44. More & More…
  45. 45. 秘籍?
  46. 46. 知己知彼,百战不殆!
  47. 47. 战争是持久的,胜利是我们的!
  48. 48. 鉴定信念,战胜 IE6!
  49. 49. ref• http://htmlhelp.com/tools/validator/docty pe.html• http://www.positioniseverything.net/explor er/floatIndent.html• http://msdn.microsoft.com/en- us/library/bb250481%28v=vs.85%29.aspx
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×