最近在使用taro开发小程序时发现一个怪异的现象，其实也不算是怪异，只是自己平时没太注意的现象。
有一个显示图片的组件，类似下面：
<View className={styles.imageContent}>
<Image className={styles.image} src={image.url}></Image>
</View>.imageContent {
width: 160px;
padding: 16px;
.image {
width: 100%;
height: 100%;
}
}但是显示图片的时候，出现了纵向滚动条：
就像上面图片右侧的滚动条，不明白这是什么原因了。
然后就百度了一大堆，感觉都不太符合这种情况，首先是子元素的高度是100%于父元素的，那么就是说图片的高度是等于父元素的高度的，那么既然是相同的高度，又为什么会出现纵滚动条呢？现在出现了纵向滚动条，那么说明子元素的实际高度是大于父元素的实际高度的 ，但是父子元素在F12下可以看到高度是一致的。
后面终于找到一篇能说服我的文章
行内可替换元素设置100%高度后导致页面出现滚动条的原因探究及解决
，其实根本原因就在于inline-block和baseline时，基线的位置与整行元素的基线对齐位置导致的。
因为taro-ui的Image组件的样式就是inline-block
，而行内元素在对齐时默认的值是vertical-align: baseline;
baseline的对齐基线并不是整个行内元素对齐的边缘，而在这条基线的下方还有一个不可见的空白元素(暂且理解为空白元素)，正是这个”空白元素”是的imageContent内的实际高度高于了父元素的实际高度，导致出现了纵向滚动条。
然后就写一个最简单的示例来验证：
<!DOCTYPE html>
<html>
<head>
<title>Vertical-Align的行为</title>
<style type="text/css">
body,
html {
width: 100%;
height: 100%;
}
.parent {
height: 50%;
width: 50%;
overflow: auto;
background-color: skyblue;
}
.child {
width: 100%;
height: 100%;
display: inline-block;
background-color: green;
}
</style>
</head>
<body>
<span
>子元素使用 display: inline-block; 时，即使子元素设置了 height: 100%;
也会出现垂直滚动条</span
>
<div class="parent">
<div class="child"></div>
</div>
</body>
<script></script>
</html>
拿到chrome打开看一下效果：
可以看到， 同样出现了纵向滚动条，往下滚动时，能看到在子元素的下面还有一个高度很小的”空白元素”，也正是这个”空白元素”的填充使得内部实际高度大于了父元素的实际高度而出现纵向滚动条。
解决办法也比较多：
1.对父元素imageContent使用overflow-y: hidden;
2.对父元素imageContent使用line-height: 0;
3.对父元素imageContent使用font-size: 0;
4.对子元素image使用vertical-align: bottom;(或其他值，参考：
vertical-align – CSS（层叠样式表） | MDN
)
……
还有很多其他方式，可以自行尝试。
这里也是借鉴别人的经验，经过尝试去验证是否符合自己的实际情况，当inline-block与baseline相遇时，会出现我们看不见的”空白元素”进来，但是它不参与父子元素的高度计算中来，导致我们很容易忽略掉，也不容易想到这里来。
贴上参考文章链接：
行内可替换元素设置100%高度后导致页面出现滚动条的原因探究及解决 – 写给未来的回忆录