Question

我目前正在开发一个项目，该项目需要在元素顶部和底部设置边框，并将其扩展到页面边缘。我有一个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放在psuedos旁边显示。但是后来我的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 Shortcuts但可能错过了一些只是因为人们认为他们看错了。

编辑：根据要求，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

顶部是firefox，底部镀铬

Answer 1

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

在您的情况下，您将.bottom上的填充/边距设置为2900px / -2900px，以便在身体边缘看到渐变。如果将其更改为950px / -950px，则会显示出来。如果将伪元素的宽度设置为1900px，它们会显示出来。如果设置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岁。我很难过为什么会这样。

Answer 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.

Pseudo Elements在chrome中消失但不是firefox

2 个答案: