• Like
  • Save
box model
Upcoming SlideShare
Loading in...5
×
 

box model

on

  • 1,799 views

盒模型_兼容性问题_hasLayout

盒模型_兼容性问题_hasLayout

Statistics

Views

Total Views
1,799
Views on SlideShare
1,716
Embed Views
83

Actions

Likes
10
Downloads
115
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