inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。
那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边的按钮。
我们可以把中间邮箱设定最大宽度,然后对于长度超出部分设置overflow: hidden来解决这个问题。
但是这可能会引发另一个经典的 baseline 对齐问题,也就是本文要讨论的主要问题。
问题现象
我们先给出一个在线实例:
http://wow.techbrood.com/fiddle/15438
我们可以看到当给中间的 inline-block 元素p添加overflow: hidden属性后,其左右相邻元素被奇怪的向下拉动了一定的距离。
解决方法
常用的解决方法是为上述inline-block元素添加vertical-align: bottom。你可以在上面的例子中在线测试下。
问题原因
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。
此外由于div包含块中只有行内级别的元素,所以将生成一个IFC(行内格式化上下文)来规定其中元素的渲染规则。
按照IFC布局规则,垂直方向上对齐遵照vertical-align属性(请参考阅读:http://techbrood.com/h5b2a?p=css-ifc),
那么p元素两边的2个匿名line box将被迫向下移动一个偏移值来和p元素对齐。
那么可能有人要进一步追问了,为什么W3要做如此奇怪的规定呢?
这是因为overflow被设置为非visible值,将使得该inline-block元素中的last line box的渲染处于不确定状态(浏览器可能渲染也可能不渲染),
这让保持默认规则的baseline也处于不确定状态,那么索性就规定以确定的下外边沿来作为baseline。
"baseline" -
1. Align the baseline of the box with the baseline of the parent box.
2. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
偏移的计算
上述的向下偏移量,实际上就是inline-block元素的默认baseline和其下外边沿的距离。
shift = D(descent) part of Glyph(字母下降部分)+ bottom half-leading
参考链接:
1. http://techbrood.com/h5b2a?p=css-line-height
2. http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height


最新评论
- 相关文章
2019年开源WebRTC媒体服务器选型比较
什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...
OpenGL/WebGL顶点坐标变换过程简介
世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...
WebGL场景中多相机拍摄的原理和意义
一般而言,3D场景的渲染只需要一个相机,不过借助多相机可以获取一些单相机无法达到的特效。比如突显特定对象并模糊背景。
3D相机渲染的基本原理是依靠颜色...WebAssembly工作原理和JavaScript语言性能对比分析
本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...
WebGL Roadmap
Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...
React JSX语法简介
JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...
HTTP1.1协议现状、问题和解决方案
HTTP的现状最早的HTTP协议非常简单,只能用来传送文本,方法也只有GET,后来逐步发展到1.1,能够支持多种MIME格式数据(如文本、文件),支持GET,POST,HEAD,OPTI...
使用SVG和CSS3创建圆形进度条动画
圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...
S3TC(S3 Texture Compression)纹理压缩格式详解
使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这...
CSS3图片混合(Blend)效果及其参考计算公式一览表
在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...
WebGL入门教程6 - 光照效果和Phong光照模型
正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...
WebGL入门教程3 - Canvas、Context、API和绘制一个矩形
如何基于Canvas来模拟真实雨景Part2:重力掉落和雨滴融合
如何使用纯CSS3实现一个3D泡沫
要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble
更多...