box model
DESCRIPTION
盒模型_兼容性问题_hasLayoutTRANSCRIPT
2011-04-19
Box Model
Hack !
#box {color:black; /*firefox*/color:red\9; /*所有ie*/*color:blue; /*ie7*/_color:green; /*ie6*/
}
CSS Basic Box Model
#box {border:20px solid red;padding:20px;width:100px;height:100px;
}#box p {width:100%;height:100%;
}
<div id=“box”><p>#box</p>
</div>
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
!IE6
float:leftmargin-left:100px
This is a bug!
float:leftmargin-left:100pxdisplay:inline
Fix this bug
IE hasLayout
div#box {background:red;filter:alpha(opacity=50);
}
<!DOCTYPE html>…<div id=“box”>text
</div>
Filter dosn’t work in IE6/7
Filter is ok in IE8
div#box {background:red;filter:alpha(opacity=50);
}
<!DOCTYPE html>…<div id=“box”>text
</div>
在IE6/7下没有hasLayout
没有 hasLayout 的元素上Filter 无作用
Why？
降低渲染压力
• div• span
默认不具有 hasLayout
激活元素的 hasLayout• position• float• width(!auto)• height(!auto)• zoom• overflow
div#box {background:red;filter:alpha(opacity=50);height:19px;
}
<!DOCTYPE html>…<div id=“box”>text
</div>
让div具有hasLayout
Filter is ok in IE6/7
Filter is ok in IE8
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 IE7
It’s incorrect in IE6
#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>
height触发了#content的hasLayout
#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>
height触发了#content的hasLayout
IE6/7�下 #content�显示为矩形
#pic {float:left;width:50px;height:50px;
}#content {border:1px solid blue;background:yellow;height:100%;
}
<div style=“background:yellow”><div id=“pic”></div><div id=“content”>long text…</span>
</div>
样式定义在wrapper上
It’s correct in IE7
It’s correct in IE6
Margin Overlap
Rules
• 水平margin不重叠
• 浮动元素上下margin不重叠(float)• 飘动元素上下margin不重叠(position)• 常规折行上下margin重叠
<div id=“wrapper”><p></p><p></p>…
</div>
#wrapper {width:500px;
}#wrapper p{width:100px;margin:50px;float:left;
}
margin:50px
margin:50px100px
浮动元素上下margin不重叠
<div id=“wrapper”><p></p><p></p>…
</div>
#wrapper {width:500px;
}#wrapper p{width:100px;margin:50px;float:left;
}
如果去掉浮动？
margin:50px
无浮动/飘动元素上下margin重叠
More & More…
秘籍？
知己知彼，百战不殆！
战争是持久的，胜利是我们的！
鉴定信念，战胜 IE6！
ref
• http://htmlhelp.com/tools/validator/doctype.html
• http://www.positioniseverything.net/explorer/floatIndent.html
• http://msdn.microsoft.com/en-us/library/bb250481%28v=vs.85%29.aspx
