html - 每个浏览器的背景图都不同，哪个是正确的？

Question

我创建了一种样式，可以突出显示段落中的部分句子，如下所示:

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 中发现了两个问题。

1. 突出显示在文本下方。

1. 突出显示应用于未应用突出显示的元素。在此图中，应用于“incididunt ut labore”的突出显示改为应用于其他地方。

我试着看看谷歌浏览器是否有同样的问题。然后，它变成了不同于 Firefox 的行为。

1. 没有出现文字下方出现高亮的问题。并且，高光被应用到其他元素的问题也没有发生。但是会出现高亮消失的问题。

,

问题

1. 根据规范，图像中 Firefox 和 Google Chrome 的哪个工作方式是正确的？
2. 如何解决这些问题并始终显示黑色高光？

Answer 1

问题是在换行时在相对内联元素上使用绝对元素。在这种情况下很难定义顶部/左侧/右侧/底部，并且每个浏览器实现不同的东西。

简单的考虑一个背景着色，让颜色和背景一样，就可以得到一样的高光效果:

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>