时间戳

首页 > 解决方案 > 每个浏览器的背景图都不一样，哪个是正确的？

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

问题描述

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

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. 高光应用于未应用高光的元素。在该图中，应用于“incidudnt ut labore”的突出显示改为在其他地方应用。

图二（火狐版）

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

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

图 1（Chrome 版）,

图 2（Chrome 版）

问题

  1. 根据规范，图像中 Firefox 和 Google Chrome 的哪个工作是正确的？
  2. 如何修复这些故障并始终显示黑色高光？

标签： htmlcssbackground

解决方案

Aspan是一个内联元素，因此当您尝试它时，它不会是绝对定位元素的有效（相对）锚点。相反，绝对定位元素的位置将取决于下一个更高的相对定位的父块（或内联块）元素，这会导致您描述的问题。

但是你为什么不把背景（加上另一种文本颜色和一些填充）应用到它span本身呢？这要简单得多。

body {
  background: #fafafa;
  padding-top: 1em;
}

.paragraph>span {
  background: black;
  color: white;
  padding: 2px 4px;
}
<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>

推荐阅读