工作中遇到的一些CSS奇葩问题

这里该说点什么呢……

类span之间的间隙

行内元素或者设置了inline、inline-block的元素在编码时没有放在同一行（或者在同一行并且元素之间有空格等），那么在浏览器浏览该页面时对应的元素之间就会有间隙。

事故现场

下面是几个案例 案例一

此案例使用div容器包含span元素复现

祈祷 甘心情愿 片片枫叶情

案例二

此案例使用div容器包含div元素并且设置display: inline复现

手心里的温柔
西海情歌
情人

解决方式

方式1

编码时控制在同一行并且元素之间没有空格等。

案例一
祈祷甘心情愿片片枫叶情

案例二

注意：这个没有觉得的原因是自动格式化之后换行了。如果在同一行没有问题。

手心里的温柔
西海情歌
情人
方式2

css样式解决：子元素设置float: left

案例一
祈祷 甘心情愿 片片枫叶情

案例二
手心里的温柔
西海情歌
情人
方式3

css样式解决：父容器设置font-size: 0,子元素设置font-size: 1rem

案例一
祈祷 甘心情愿 片片枫叶情

案例二
手心里的温柔
西海情歌
情人
方式4

css样式解决：父容器设置display: flex

案例一
祈祷 甘心情愿 片片枫叶情

案例二
手心里的温柔
西海情歌
情人

position: fixed的一些问题

和transform的宿怨

案例

这里是div容器，没有设置transform

position: fixed 测试一。父容器没有设置 transform ，所以位置正常

这里是div容器，已设置transform

position: fixed 测试。父容器已设置 transform ，所以位置异常

设置position: fixed样式元素的父元素或者祖先元素如果设置了transform样式（不是所有的该属性值对其有影响，测试发现有些值没有影响），那么position: fixed样式会失效。

chrome 73下的问题

案例

这里是div容器

注意：经测试发现这是position: fixed;、overflow-y: auto;、border-radius: 4px;相互影响的结果。屏蔽掉overflow-y或者border-radius之后都可以显示出来，但是不是我们想要的结果。

祈祷

让我们敲希望的钟啊

多少祈祷在心中

让大家看不到失败

叫成功永远在

让地球忘记了转动啊

四季少了夏秋冬

让宇宙关不了天窗

叫太阳不西冲

让欢喜代替了哀愁啊

微笑不会再害羞

让时光懂得去倒流

叫青春不开溜

让贫穷开始去逃亡啊

快乐健康留四方

让世界找不到黑暗

幸福像花开放

让我们敲希望的钟啊

多少祈祷在心中

让大家看不到失败

叫成功永远在

让大家看不到失败

叫成功永远在

红尘有你
谁明浪子心
一场游戏一场梦
忘了你忘了我
是否我真的一无所有
安妮
解决方式

这里是div容器

案例现场是position: fixed;的元素直接作为了滚动容器（也就是设置了overflow-y: auto;），这里的解决方式是给position: fixed;元素添加子元素作为滚动容器。

注意：这里仅仅为了演示效果，二级菜单（也就是歌词部分）没有添加滚动容器。如果是嵌套组件（或者此处还有下级菜单），也应该添加额外的滚动容器

祈祷

让我们敲希望的钟啊

多少祈祷在心中

让大家看不到失败

叫成功永远在

让地球忘记了转动啊

四季少了夏秋冬

让宇宙关不了天窗

叫太阳不西冲

让欢喜代替了哀愁啊

微笑不会再害羞

让时光懂得去倒流

叫青春不开溜

让贫穷开始去逃亡啊

快乐健康留四方

让世界找不到黑暗

幸福像花开放

让我们敲希望的钟啊

多少祈祷在心中

让大家看不到失败

叫成功永远在

让大家看不到失败

叫成功永远在

红尘有你
谁明浪子心
一场游戏一场梦
忘了你忘了我
是否我真的一无所有
安妮