为p标签设置inline-block属性导致文本随机出现下划线的原因及解决方法

问题原因 #

• 内容的父容器是<a>标签，浏览器默认给<a>标签配置了text-decoration: underline样式。
• HTML编写时<a>标签和内部的#auth-google-text元素之间存在换行或空格，会被浏览器解析为空白文本节点，该节点属于<a>的行内内容，会被应用下划线样式。
• 给#auth-google-text设置inline-block属性后，该元素本身不会继承父级的text-decoration，但旁边的空白文本节点仍正常渲染，对应的下划线就会暴露出来，看起来像是随机出现的多余下划线。移除inline-block后#auth-google-text变回普通行内元素，会和空白节点一起被父级的下划线覆盖，视觉上就看不到多余的下划线。

解决方法 #

任选以下一种方案即可修复：

• 调整HTML格式，把<a>标签和内部的#auth-google-text元素写在同一行，不要保留换行或空格，直接消灭空白文本节点。
• 给父级<a>标签添加text-decoration: none样式，关闭默认的下划线规则，需要下划线的场景单独给内部文本元素设置即可。
• 给父级<a>标签设置font-size: 0，再单独给#auth-google-text配置需要的字号，让空白文本节点的字号为0，对应的下划线也不会被渲染。

内容的提问来源于stack exchange，提问作者howard