复现方式

有代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <style type="text/css">
  5.       .only-display {
  6.         display: inline-block;
  7.       }
  8.       .only-overflow {
  9.         overflow: hidden;
  10.       }
  11.       .display-and-overflow {
  12.         display: inline-block;
  13.         overflow: hidden;
  14.       }
  15.       .display-and-overflow-and-vertical-align {
  16.         display: inline-block;
  17.         overflow: hidden;
  18.         vertical-align: bottom;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <div>
  24.       only display:
  25.       <div class="only-display">text</div>
  26.     </div>
  27.     <div>
  28.       only overflow:
  29.       <div class="only-overflow">text</div>
  30.     </div>
  31.     <div>
  32.       display and overflow:
  33.       <div class="display-and-overflow">text</div>
  34.     </div>
  35.     <div>
  36.       display and overflow and vertical-align:
  37.       <div class="display-and-overflow-and-vertical-align">text</div>
  38.     </div>
  39.   </body>
  40. </html>

在浏览器中显示如下：
image.png
如图所示，在红框标定的位置，这个文字元素的位置向上浮动了。

原理

据我搜索，是因为：

这两个 css 属性放在一起会将此 div 的 bottom 位置会变成前一行的 baseline 位置。

我自己都看不懂这句话。。。

解决方案

给这个 div 新增一个 vertical-align: bottom; 即可。

顺带吐槽一下，CSS 这种属性间隐式的关联关系，太难用了。

[END]