box model

2,210 views
2,032 views

Published on

盒模型_兼容性问题_hasLayout

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

No Downloads
Views
Total views
2,210
On SlideShare
0
From Embeds
0
Number of Embeds
86
Actions
Shares
0
Downloads
126
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

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

×