多出的滚动条
最后更新于
最后更新于
今天这个 bug 好玩哈
这块总是有一个滚动条
而且啊
它跟里边这个元素的数量没有关系
比如说我把它只保留一个
大家看它还是有这个滚动条
我们来检查一下它这个元素
大家看最外层现在是40像素高度
然后里层有个 spa 标签现在是19.
然后呢这还有个 div
div 是40 可能很多同学说
有可能就是这个 div 导致的
我们把这个 div 去掉
大家看他还是有这个滚动条
那到底是为什么呢
我们这样我们把里边这个四瓣标签啊
先加一个黑色的背景
然后因为他现在默认是 display: inline
我们把它改成 display: inline-block
好然后大家注意我把它放大
大家仔细看上面是不是错开了一点点
而且呢下边超出了一点点
那更好玩的是什么呢
我里边这个字体
如果变小的话呢大概错开的就多了
下边超出的也多了
甚至呢我们把这块
把外边的这个
的字体改成
大家看它超出的就更多了
那到底为什么会这样呢
这个我之前也讲过
原因就是
他这个（vertical-align）base-line对齐的问题
比如我在这写个
大家一下就看出来了
那哪条线是base-line呢
就是这条线
他默认是base-line（基线）对齐的
所以呢
左边这个 span 标签
为了保持让里边的文字和
整体保持base-line（基线对齐）
他就会往下错位
所以要解决这个问题呢
第一种方法就是把两个字体
调成一样的大小（不演示了）
第二个方法就是我们在这加一个
vertical-align 等于 top
这样就解决了
我们把这个代码头撤销一下试一下
好
然后注意看现在是有滚动条的对吧
然后我们在这加一个
vertical-align: top
好大家看，这回没有滚动条了
完美解决