overflow: hidden导致的相邻元素下移的问题

在一次页面改动需求中,需要对一行数据进行超出隐藏设置。设置完成后发现,他左右两端的元素莫名其妙的往下偏移了。
Why? 查询各种资料之后有了以下文章
1.png

相关代码

具体的样式图如上所示,明显发现超出隐藏的文字和左边的icon不在同一行内, icon被往下移动了

1
2
3
4
5
6
7
8
.content-info {
display: inline-block;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 8rpx;
}

设置超出隐藏并显示点点点后,相邻的行内元素被下移。
多番注释后发现导致问题的根本原因是设置了

1
overflow: hidden;

解决办法

  1. 在相邻的行内元素的样式设置 overflow: hidden; 这样你飘我也飘,大家一起飘就都一样了。
  2. 在相邻的行内元素设置样式 vertical-align: top; 把相邻元素的 baseline 上移,保持高度一致即可。
  3. 在超出隐藏的行内元素增加样式 vertical-align: top; 我虽然超出,但是我不飘,那样我们就一致了。
  4. 设置相邻元素样式 flot: left; 你飘我漂浮,你是风儿我是沙,飘飘荡荡闯天涯。
    2.png
    如图所示,第一行设置了 overflow: hidden; 后, 整行元素高度一致了,美丽!

根本原因

根据 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.

文档来源 https://www.w3.org/TR/CSS2/visudet.html#leading
大体意思就是:
当一个 inline-block 元素被设置成 voerflow 的非 visible 属性值之后,所在的 baseline 会被强制修改为元素的下边沿。
我们知道默认情况下,baseline 为字符x的底线位置且 vertical-align 属性值为 baseline
此外由于div包含块中只有行内级别的元素,所以将生成一个IFC(行内格式化上下文)来规定其中元素的渲染规则。
按照IFC布局规则,垂直方向上对齐遵照 vertical-align 属性(请参考阅读:http://techbrood.com/Guide/h5b2a?p=css-ifc),
那么p元素两边的2个匿名line box将被迫向下移动一个偏移值来和p元素对齐。

这是因为被这样设置之后,使得该元素中的 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.

所以才产生了以上的下移效果。

参考资料

  1. https://www.w3.org/TR/CSS2/visudet.html#leading
  2. https://blog.csdn.net/itpinpai/article/details/79927750
  3. https://www.jianshu.com/p/c2d8ae7bb553
咸鱼也要有梦想,万一实现了呢
0%