常见问题与规范文档细节探寻.ppt

* * * * * * * * 常见问题与规范文档细节探寻 2010.12 貘 IE 6、7 下文字断头断脚问题 webkit 断脚问题 (chrome 10.0.612.3 dev 修复) IMG 下的间隙 思考：同行的表单元素怎么对齐 relative 被父容器裁断了 IE 数组内最后一个逗号的问题 ( 非 IE9 ) Chrome Opera (IE9) 中 for-in 遍历对象属性的顺序 一些常见问题 相同原因导致？ 相同原因导致？ IE 6/7 文字断头断脚 !DOCTYPE html div style=margin-top:100px;span style=font-size:100px;line-height:20px;A/span/div webkit 下的断脚 !DOCTYPE html div style=background:gold;overflow-y:scroll;height:35px; span style=font-size:20px;line-height:50px;background:yellowAAA/span /div 奇怪的间隙：!DOCTYPE html div style=background:#CCC; font-size:16px; img src=/intl/en_ALL/images/srpr/logo1w.png/ /div 换个常用 DOCTYPE看看：!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 通常情况下可以理解为中文的文字底边处于 baseline 位置 文字顶部处于行内框顶部。 仅中文存在的情况下，文字底边线与 baseline 位置重合。 top 与 bottom 之间为 inline box 高度，即是 line-height 设置值（不含替换元素） 正常情况下的 inline box 布局结构 实际情况其实很复杂，不同的字体为文字预留的上下划线高度不同，会导致文字顶部和底部留有不同高度的空隙，这就是设计值与实际值不同的情况。 top bottom baseline ag中文 line-height font-size top bottom baseline 中文 line-height font-size 其余情况下 inline box 可能呈现的布局结构 top bottom baseline ag中文 font-size line-height text-bottom text-top half-leading half-leading 需要注意：leading 是 font-size 与 line-height 的差值。half-leading 是这个差值的一半，分别填充在文字上下方。这就出现了问题，假设差值是个奇数 9px，那么是上下填充 5px/4px 呢？还是 4px/5px 呢？规范里没有明确说明，这就造成了不同浏览器再细节上的处理差异。 其余情况下 inline box 可能呈现的布局结构 top bottom baseline ag中文 font-size line-height text-bottom text-top half-leading half-leading 文字溢出 inline box 时 half-leading 为负值，这不影响布局。 溢出的文字可能会产生重叠。 细节信息可查看 CSS 2.1 规范 10 Visual formatting model details 10.8.1?Leading and half-leading /TR/CSS21/visudet.html#leading margin padding border 都去哪里了 ag中文 text-bottom text-top content box padding box border box margin box 需要注意：不同字体为文字预留的上下划线空隙不等(1-2px) ，因此文字的字体绝对顶边和底边大部分情况下与布局盒的 content box 顶底有距离。 maring padding border 都不加入行内框高度的计算（也就不参加行框高度的计算），它们还是在行内框周围得到渲染。 这就意味着如果，一组行内框在垂直方向生成了多个行框。 一个行框的高度小其中某个行内框的 border 边界，background 以及 border 可能会“渗入”会垂直方向相邻的行框。 margin padding border 都去哪里了 规范的演