我创建了一种样式,可以突出显示段落中的部分句子,如下所示:
body {
background: #fafafa;
padding-top: 1em;
}
.paragraph>span {
position: relative;
}
.paragraph>span:after {
background: black;
content: "";
width: 100%;
height: 1.2em;
left: 0;
position: absolute;
}
<p class="paragraph">
Lorem <span>ipsum dolor sit amet</span>, consectetur adipiscing elit, sed do eiusmod tempor <span>incididunt ut labore</span> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi <span>ut aliquip ex ea commodo</span> consequat.
</p>
我用 jsFiddle 测试了这个.我在 Firefox 中发现了两个问题。
- 突出显示在文本下方。
- 突出显示应用于未应用突出显示的元素。在此图中,应用于“incididunt ut labore”的突出显示改为应用于其他地方。
我试着看看谷歌浏览器是否有同样的问题。然后,它变成了不同于 Firefox 的行为。
- 没有出现文字下方出现高亮的问题。并且,高光被应用到其他元素的问题也没有发生。但是会出现高亮消失的问题。
,
问题
- 根据规范,图像中 Firefox 和 Google Chrome 的哪个工作方式是正确的?
- 如何解决这些问题并始终显示黑色高光?
最佳答案
问题是在换行时在相对内联元素上使用绝对元素。在这种情况下很难定义顶部/左侧/右侧/底部,并且每个浏览器实现不同的东西。
简单的考虑一个背景着色,让颜色和背景一样,就可以得到一样的高光效果:
body {
background: #fafafa;
padding-top: 1em;
}
.paragraph > span {
background: black;
color:black;
}
<p class="paragraph">Lorem <span>ipsum dolor sit amet</span>, consectetur adipiscing elit, sed do eiusmod tempor <span>incididunt ut labore</span> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi <span>ut aliquip ex ea commodo</span> consequat. </p>
关于html - 每个浏览器的背景图都不同,哪个是正确的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59240134/