overflow:hidden和display：inline-b
2018-05-28 本文已影响0人
小豆soybean
同时拥有overflow hidden 和 display inline-block 的元素，会对行内元素垂直对齐 有影响，
导致原因是 overflow hidden 改变了默认对齐方式
解决办法：添加 vertical-align: bottom
参考文档：
http://stackoverflow.com/questions/20566710/overflowhidden-displayinline-block-moves-text-upwards
This happens because the inline-block element has height equal to its parent and overflow: hidden causes its bottom edge to be aligned on the text baseline of the parent. As a result the space that is available for descenders on the text is essentially doubled for the (JSFiddle).
You can fix this by also giving it vertical-align: bottom.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container {
height: 25px;
line-height: 25px;
border: 1px solid gray;
width: 200px;
font-size: 12px;;
}
.zhongwen {
display: inline-block;
overflow: hidden;
vertical-align: bottom
}
</style>
</head>
<body>
<div class="container">
<span class="zhongwen">北京</span>
<span>BJ</span>
</div>
</body>
</html>
