本文主要是介绍Html中display为inline-block的元素有内容和没有内容情况下高度不一致问题的讨论,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
这两天发现一个问题,就是display为inline-block的元素有内容和没有内容情况下高度不一致,这对于有强迫症的喔来说是受不了的
于是我就进行了一系列的测试来找问题
发生的原因如下:
我直接怀疑是inline-block的影响
在inline或者是block的状态下都没有问题
实验得到: 在字体大小约等于inline-block元素的高度的百分之94.5的情况下高度差不多可以对其
字体大小是0的时候,有字符的元素的最高部分和没有字符的元素的最低部分对其
解决办法:
上述问题在加上overflow等于hidden 或者vertical-align: middle之后解决了
这篇关于Html中display为inline-block的元素有内容和没有内容情况下高度不一致问题的讨论的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!