Html中display为inline-block的元素有内容和没有内容情况下高度不一致问题的讨论

这两天发现一个问题,就是display为inline-block的元素有内容和没有内容情况下高度不一致,这对于有强迫症的喔来说是受不了的

于是我就进行了一系列的测试来找问题


发生的原因如下:


Html中display为inline-block的元素有内容和没有内容情况下高度不一致问题的讨论



我直接怀疑是inline-block的影响
在inline或者是block的状态下都没有问题
实验得到:
在字体大小约等于inline-block元素的高度的百分之94.5的情况下高度差不多可以对其

字体大小是0的时候,有字符的元素的最高部分和没有字符的元素的最低部分对其




Html中display为inline-block的元素有内容和没有内容情况下高度不一致问题的讨论




Html中display为inline-block的元素有内容和没有内容情况下高度不一致问题的讨论




解决办法:
        上述问题在加上overflow等于hidden    或者vertical-align: middle之后解决了Html中display为inline-block的元素有内容和没有内容情况下高度不一致问题的讨论