Your SlideShare is downloading. ×
0
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
box model
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

box model

1,834

Published on

盒模型_兼容性问题_hasLayout

盒模型_兼容性问题_hasLayout

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

No Downloads
Views
Total Views
1,834
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
125
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

×