在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如下所示:
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" alt="\" />
那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边的按钮。
我们可以把中间邮箱设定最大宽度,然后对于长度超出部分设置overflow: hidden来解决这个问题。
但是这可能会引发另一个经典的 baseline 对齐问题,也就是本文要讨论的主要问题。
1. 问题现象
我们先给出一个在线实例:
http://wow.techbrood.com/fiddle/15438
我们可以看到当给中间的 inline-block 元素p添加overflow: hidden属性后,其左右湘…?http://www.weiyer.com/Search.asp?KeyWord=/database/DB2/" target="_blank" class="keylink">DB2tSqy9ixu8bmuda1xM/yz8LArbavwcvSu7aotcS+4MDroaM8L3A+PHA+PGltZyBzcmM9"http://blog.csdn.net/iefreer/article/details/data:image/png;base64,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" alt="\" />
2. 解决方法
常用的解决方法是为上述inline-block元素添加vertical-align: bottom。你可以在上面的例子中在线测试下。
3. 问题原因
W3的规范对此行为有明确规定:
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
我们从规范中可以知道当一个inline-block元素被设置overflow非visible属性值后,其baseline将被强制修改为元素下外边沿。
我们知道默认情况下,baseline为字符x的底线位置且vertical-align属性值为baseline。
此外由于p包含块中只有行内级别的元素,所以将生成一个IFC(行内格式化上下文)来规定其中元素的渲染规则。
按照IFC布局规则,垂直方向上对齐遵照vertical-align属性(请参考阅读:http://techbrood.com/Guide/h5b2a?p=css-ifc),
那么p元素两边的2个匿名line box将被迫向下移动一个偏移值来和p元素对齐。
那么可能有人要进一步追问了,为什么W3要做如此奇怪的规定呢?
这是因为overflow被设置为非visible值,将使得该inline-block元素中的last line box的渲染处于不确定状态(浏览器可能渲染也可能不渲染),
这让保持默认规则的baseline也处于不确定状态,那么索性就规定以确定的下外边沿来作为baseline。
baseline Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
4. 偏移的计算
上述的向下偏移量,实际上就是inline-block元素的默认baseline和其下外边沿的距离。
5. 参考链接:
1. http://techbrood.com/Guide/h5b2a?p=css-line-height
2. http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
by iefreer