伪元素在 chrome 中消失，但在 firefox 中消失答案

【问题标题】：Pseudo Elements disappear in chrome but not firefox伪元素在 chrome 中消失，但在 firefox 中消失
【发布时间】：2013-12-04 18:28:55
【问题描述】：

我目前正在做一个项目，该项目需要元素顶部和底部的边框，并将其扩展到页面边缘。我有一个 960px 宽的包装器，我已将 overflow-x 设置为在 body 和 html 上隐藏。我正在使用以下样式。

#profile-page{
    position:relative;
    overflow:hidden;
}
#profile-page .bottom:after, #profile-page .bottom:before {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  height: 5px;
  background-image: -webkit-linear-gradient(0deg, #7ad100 95px, #00bce8 95px, #00bce8 190px, #ffde00 190px, #ffde00 285px, #ff5942 285px, #ff5942 380px);
  background-image: -ms-linear-gradient(0deg, #7ad100 95px, #00bce8 95px, #00bce8 190px, #ffde00 190px, #ffde00 285px, #ff5942 285px, #ff5942 380px);
  background-image: -moz-linear-gradient(0deg, #7ad100 95px, #00bce8 95px, #00bce8 190px, #ffde00 190px, #ffde00 285px, #ff5942 285px, #ff5942 380px);
  background-size: 380px;
}

#profile-page .bottom:before{
  top: -2px;
}
#profile-page .bottom:after{
  bottom: -2px;
}
#profile-page .bottom{
    padding-left:3000px;
    margin-left:-3000px;
    padding-right:3000px;
    margin-right:-3000px;
    position:relative;
    background: #ffffff;
}

样式在 Firefox 中显示良好，但在 chrome 或 ie9 中不显示（尚未测试其他人）。我已包含屏幕截图，以便您查看实际输出。

如果我删除样式以使 .bottom 拉伸到屏幕边缘，则样式会以 chrome 显示。我不知道该样式的哪一部分与我的伪元素混淆，但希望这里有人知道。提前致谢。

编辑：只是想澄清一下，如果我删除以下规则，我将 REMOVE 放在假冒出现的旁边。但是后来我的 div 不再到达屏幕边缘并包含在包装器中，这不可能发生

 #profile-page .bottom{
    padding-left:3000px; -REMOVE
    margin-left:-3000px; -REMOVE
    padding-right:3000px; -REMOVE
    margin-right:-3000px; -REMOVE
    position:relative;
    background: #ffffff;
}

CSS 有点用 less 编写，试图去掉任何 Less 捷径，但可能会遗漏一些捷径，以防人们认为他们看到了错误。

编辑：根据要求，HTML 结构

<html>
<body id="profile-page">
  <div id="wrapper">
    <div class="top"></div>
    <div class="item bottom">
      <div id="profile-content">PROFILE LINKS</div>
    </div>
  </div>
</body>
</html>

顶部是firefox，底部是chrome

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/10871333/…
如果这不起作用，请发布您的一些 HTML 结构，以便我们查看您正在使用的内容。
@Diodeus 我认为我根据该主题正确使用了它们。
@Nathan，我添加了 HTML 结构。这是非常基本的。
你能把你的 .bottom div 移到包装器之外吗？如果是这样，您可以使 .bottom 充当包装器，然后将 #profile-content 设置为您需要的宽度。

标签： html css google-chrome firefox pseudo-element

【解决方案1】：

根据我的测试： Chrome 将伪元素 :before 和 :after 的大小限制为 1900 像素（至少在这种情况下）：http://jsfiddle.net/xLF8r/4/

在您的情况下，您将.bottom 上的填充/边距设置为 2900px/-2900px，以便在主体边缘看到渐变。如果将其更改为 950px/-950px，它们就会出现。如果将伪元素的宽度设置为 1900 像素，它们就会显示出来。如果你设置right: -280%，它们就会出现（在这种情况下它计算为-1900px）。

如果您在 Firefox 中查看此小提琴，则无论您将这些大小设置为什么，元素都会显示出来。

另一个测试：改变背景尺寸可以让元素变大并保持可见：http://jsfiddle.net/xLF8r/6/

因此，如果您增加背景大小并更改渐变以通过添加更多色标使其看起来像您拥有的那样，它应该可以工作。

从这些测试来看，chrome 似乎将伪元素的大小限制为仅比背景大小大 5 倍。 1900px / 380px = 5 在第一次测试中； 1901px 使元素消失。第二次测试6900px / 1380px = 5； 6901px 使元素消失。

编辑以供其他测试和将来参考 我很好奇，所以我创建了一个 Codepen 来查看一些示例。在这里，我可以达到背景大小的 10 倍。将相同的代码放入 jsfiddle 也表明 10 次是有效的。因此，在您的代码中，有些东西将其减少到 5 倍。

我已经 reduced your code 复制了同样的行为，但我仍然只得到了 5 倍而不是 10 倍。我不知道为什么会这样。 p>

【讨论】：

我做了更多测试，发现 Chrome 允许的背景大小是 10 倍 - 我仍然无法让您的代码超过 5 倍。

【解决方案2】：

just remove the line // position:relative;
from the lines
#profile-page .bottom{
    padding-left:3000px;
    margin-left:-3000px;
    padding-right:3000px;
    margin-right:-3000px;
    position:relative;
    background: #ffffff;
}

I am sure it will work.

【讨论】：