DIV中的span内部文字排版掉落、错位的原因及解决方法

时间:2024-03-19 13:08:44

       今天是第一次写博客,我也是今年刚毕业,目前是webgis开发岗位。写一下博客也是想记录一下踩过的坑 顺便分享给有需要的小伙伴们。

        今天做项目,需求是修复一下主页鼠标移动中,左下方坐标栏文字消失的bug

HTML和CSS:代码如下

DIV中的span内部文字排版掉落、错位的原因及解决方法

DIV中的span内部文字排版掉落、错位的原因及解决方法

正常情况是这样的

DIV中的span内部文字排版掉落、错位的原因及解决方法

但是当我把鼠标移动到屏幕边框处的时候      下面的固定面板神奇地消失了。

DIV中的span内部文字排版掉落、错位的原因及解决方法

于是乎我在网上找了各种办法,发现并不是函数逻辑的错误,而是display这个属性从中作梗。网上各种说法:诸如 inline-block 元素可设置 vertical-align 属性。另外,有设置line-height等于外面div的height方法,但是无法正常显示太长的内容。

 但是这些都没有解决我的问题

最后我发现我把子样式中的inline-block属性清除掉之后,问题才得以解决。

DIV中的span内部文字排版掉落、错位的原因及解决方法

具体什么原因我也不是特别明白,也不求甚解,以后遇到这种类似问题知道从display属性下手就行了