box model

  • 1,752 views
Uploaded on

盒模型_兼容性问题_hasLayout

盒模型_兼容性问题_hasLayout

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,752
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
117
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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