每个浏览器的背景图是不同的，对吗？

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. 突出显示在文本下方。

2. 突出显示应用于未应用突出显示的元素。在此图中，应用于“劳工骚动”的重点显示在其他位置。

我试图查看Google Chrome浏览器是否存在相同的问题。然后，它的行为不同于Firefox。

1. 突出显示的问题出现在下面的文本尚未发生。并且，没有发生将突出显示应用于其他元素的问题。但是，会出现高光消失的问题。

，

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS8xMG45ci5wbmcifQ==” alt =“图片2（Chrome版本）”>

问题

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>