【css】行内块元素overflow:hidden;带来的塌陷问题

前言：奇怪的事情总会发生在生活的方方面面，前端开发也是。

一、问题起始

①行内块与行内元素

<body>
<span>夏末微凉</span>
<span>夏末微凉</span>
<style>
span { border-bottom:1px solid #000;  }
span:first-child  {  display:inline-block; }
</style>
</body>

②行内块与行内块元素

<body>
<span>夏末微凉</span>
<span>夏末微凉</span>
<style>
span { border-bottom:1px solid #000; display:inline-block; }
</style>
</body>

运行结果：

对的整整齐齐，毫无疑问。

二、添加overflow:hidden

①行内块与行内元素

<body>
<span>夏末微凉</span>
<span>夏末微凉</span>
<style>
span { border-bottom:1px solid #000;  }
span:first-child  { display:inline-block; overflow:hidden; }
</style>
</body>

②行内块与行内块元素

<body>
<span>夏末微凉</span>
<span>夏末微凉</span>
<style>
span { border-bottom:1px solid #000; display:inline-block;  }
span:first-child  { overflow:hidden; }
</style>
</body>

运行结果：

第二个span标签，莫名其妙的塌陷下去了。

三、解决方案

(添加vertical-align属性，值是top或者bottom都可以，而且添加到两个元素，任意一个都可以)

①行内块与行内元素

<body>
<span>夏末微凉</span>
<span>夏末微凉</span>
<style>
span { border-bottom:1px solid #000;  }
span:first-child  { display:inline-block; overflow:hidden; vertical-align:top; }
</style>
</body>

---------

<body>
<span>夏末微凉</span>
<span>夏末微凉</span>
<style>
span { border-bottom:1px solid #000; vertical-align:top;}
span:first-child  { display:inline-block; overflow:hidden;  }
</style>
</body>

②行内块与行内块元素

<body>
<span>夏末微凉</span>
<span>夏末微凉</span>
<style>
span { border-bottom:1px solid #000; display:inline-block; }
span:first-child  {  overflow:hidden; vertical-align:top; }
</style>
</body>

------

<body>
<span>夏末微凉</span>
<span>夏末微凉</span>
<style>
span { border-bottom:1px solid #000; display:inline-block; vertical-align:top;}
span:first-child  {  overflow:hidden;  }
</style>
</body>

四、问题产生原因

类似于这样，红色字体为模拟被隐藏部分。

简单的说，因为实现隐藏功能的时候，隐藏部分的内容的vertical-align变成了baseline;对齐了，这样也导致行内块元素高度被撑高了。而后续的行内块元素跟行内元素，是接在了隐藏部分的vertical-align的高度上了。只要改回后续行内块元素跟行内元素的vertical-align值就可以了。

【css】行内块元素overflow:hidden;带来的塌陷问题

猜你喜欢