box model
Upcoming SlideShare
Loading in...5
×
 

box model

on

  • 1,837 views

盒模型_兼容性问题_hasLayout

盒模型_兼容性问题_hasLayout

Statistics

Views

Total Views
1,837
Views on SlideShare
1,754
Embed Views
83

Actions

Likes
10
Downloads
116
Comments
0

1 Embed 83

http://wiki.ued.taobao.net 83

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

box model box model Presentation Transcript

  • 盒模型,兼容性,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”>} <p>#box</p>#box p { </div> width:100%; height:100%;}
  • 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"> <!DOCTYPE HTML>
  • 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</div>
  • 没有 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<!DOCTYPE html>…<div id=“box”> text</div>
  • 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 id=“pic”></div> <div id=“content”>long text…</span></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%;} height触发了#content 的hasLayout<div> <div id=“pic”></div> <div id=“content”>long text…</span></div>
  • #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>
  • #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>
  • 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”> <p></p> <p></p> …</div>
  • margin:50px无浮动/飘动元素上下margin重叠
  • More & More…
  • 秘籍?
  • 知己知彼,百战不殆!
  • 战争是持久的,胜利是我们的!
  • 鉴定信念,战胜 IE6!
  • 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