inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

techbrood 发表于 2016-05-18 18:13:58

标签: css3, inline-block, overflow, hidden, ifc

- +

在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。

那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边的按钮。

我们可以把中间邮箱设定最大宽度,然后对于长度超出部分设置overflow: hidden来解决这个问题。

但是这可能会引发另一个经典的 baseline 对齐问题,也就是本文要讨论的主要问题。

下载.png

问题现象

我们先给出一个在线实例:

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

参考链接:


possitive(0) views11675 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • OpenGL/WebGL顶点坐标变换过程简介

    世界坐标是按照笛卡尔坐标系定义出来的绝对坐标系,下面的各种坐标系都建立在世界坐标的基础上。对象坐标系对象被应用于任何...

  • ARCore基本概念和工作原理简介

    谷歌的WebAROnARCore项目基于Android手机提供的ARCore增强现实引擎,要了解WebAROnARCore,需要先了解ARCore的工作原理。基本上ARCore做了两件事,首先跟踪手机...

  • CentOS6 Apache2.2用域名配置多虚拟机

    在CentOS下使用域名配置多虚拟机的步骤如下:
    1. 使用

  • 踏得网精选2016年度10大最佳HTML5动画

    踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...

  • Blender2.7给平面模型添加纹理贴图

    在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...

  • React JSX语法简介

    JSX是一种类似XML的标签语法,用来简化代码,我们可以不使用JSX,但了解并使用也没什么坏处:)在React中,JSX是一个使用 React.createElement() API的快捷方式...

  • WebGL 纹理映射模式以及WRAP_S | WRAP_T参数详解

    我们在纹理滤镜一文中已经说明了2个重要的纹理参数,用来定义对象缩放时纹理的处理方式:GL_TEXTURE_MIN_FILTERGL_TEXTURE_MAG_FILTER本文讲解其余几个纹理参数...

  • 如何使用WebGL实现空气高温热变形动画特效

    我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...

  • WebGL入门教程1 - 3D绘图基础知识

    现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数...

  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...

  • 在PHP网页程序中执行Sass/Compass命令

    我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...

  • 更多...