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
最新评论
- 相关文章
html5跨平台实战-第一周-水平测验-新闻列表页面
这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图
如何使用BabylonJS加载OBJ或STL模型
BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
本文说明和演示如何使用babylon.js来加载一个标准3d模型文...CSS3属性选择器特性使用详解
CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...
深入理解Three.js(WebGL)贴图(纹理映射)和UV映射
本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效...
三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...
如何使用Three.js加载obj和mtl文件
OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...
IE各版本CSS Hack(兼容性处理)语法速查表
为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...
jQuery Ribbles - 基于WebGL的水面涟漪动效插件
使用jQuery
Three.js 3D打印数据模型文件(.STL)加载
3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...
如何使用CSS3实现一个平滑的3D文本标题
要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...
如何使用CSS3实现一个3D商品标签
使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上,来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背...
如何使用纯CSS3实现一个3D泡沫
要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble
更多...