Html中display为inline-block的元素有内容和没有内容情况下高度不一致问题的讨论
这两天发现一个问题,就是display为inline-block的元素有内容和没有内容情况下高度不一致,这对于有强迫症的喔来说是受不了的
于是我就进行了一系列的测试来找问题
发生的原因如下:
我直接怀疑是inline-block的影响
在inline或者是block的状态下都没有问题
实验得到:
在字体大小约等于inline-block元素的高度的百分之94.5的情况下高度差不多可以对其
字体大小是0的时候,有字符的元素的最高部分和没有字符的元素的最低部分对其
解决办法:
上述问题在加上overflow等于hidden 或者vertical-align: middle之后解决了