IE中的CSS视差背景图像空白

我正在使用这种方法创建一个两层视差效果，这样背景图像的滚动速度就比网站其他内容的滚动速度慢。为了清楚起见，图像覆盖了整个页面，内容位于页面顶部

我的站点分为两个主要的

div

元素（和一个容器

div

）——一个用于背景图像，另一个用于页面内容。下面是我用于不同

div

元素的代码

.container {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
  position: absolute;
  left: 0;
  right: 0;
}

.background {
  background-image: url(images/background.jpg);
  background-size: cover;
  position: absolute;
  /* margin-bottom: -200em;
     overflow: hidden; */
  height: 200em;
  left: 0;
  right: 0;
  transform: translateZ(-2px) scale(3);
}

.page-content {
  transform: translateZ(0);
}

如果不添加

margin-bottom

和

overflow

属性，则background

div

元素一旦设置为足以覆盖页面所有内容的高度，就会留下垂直空白

在添加了负边距之后，这个问题在Chrome和Firefox*中得到了解决，我增加了

div

元素的高度和负边距，使其远远超过了确保它能在不同页面长度下工作所需的高度和负边距

IE 11仍然有空白。通常

背景尺寸：封面属性”删除任何空白，但这不适用于视差效果

你知道有什么方法可以消除IE9+和其他主流浏览器的空白，还是我运气不好

这是一个与我正在创建的站点代码几乎完全相同的示例

*Firefox没有空白，但负边距并不能适用于所有页面长度。对于较短的页面，您可以滚动页面内容的末尾。我可以通过改变每一页的高度和边距来解决这一问题，但如果可能的话，我们希望有一个全局解决方案。
如果您的目标是在IE9上实现这一点，我想您会遇到一些问题。这对我很有效，但必须增加
.back
div的大小和高度

这在IE9和Chrome中适用，但您可能只需要一些IE条件


补充：

.back {
    height: 80em; 
    -ms-transform: translateZ(-2px) scale(3);
}

.front {
    -ms-transform: translateZ(0);
    z-index: 10;
    position: relative;
}

目前还没有任何方法可以让CSS视差在IE中工作。但是，由于基于Webkit的浏览器，如Chrome和Opera（我还没有测试过Safari）可以很好地使用视差，因此可以针对Webkit浏览器显示视差背景，并为其他浏览器显示不同的代码（没有视差）

首先，我将视差代码放入
@media
查询中，如下所示：

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  .container {
    [rule contents]
  }

  .background {
    [rule contents]
  }

  .page-content {
    [rule contents]
  }
}

第一个属性
（-webkit min device pixel ratio:0）
针对所有基于webkit的浏览器，但由于我假设并非所有版本的webkit浏览器都支持这种视差效果，因此我还添加了第二个属性，该属性将浏览器限制为（为了安全起见，我将Safari排除在外，但如果您发现Safari有效，也可以将其作为目标）

使用它可能是一个更好的主意，但我还没有学习JavaScript，以上是一个仅使用CSS的解决方案

在将视差规则放入
@media
查询后，我为back
div
元素设置了一个备用默认规则

（虽然在没有视差的情况下，将站点分为前后
div
元素是不必要的，但将后
div
元素设置为背景图像而不是
body
或
html
可以消除大量的延迟。）

为了尽可能保持与视差版本的相似性，我将背景图像设置为
位置：fixed

由于浏览器自上而下地读取CSS文件并按顺序应用样式，因此在文件中的标准、非视差
.back
规则之后加入视差
.back
规则（及其周围的
@media
查询）非常重要

当然，我确保所有应用于标准和视差
.back
规则的属性只存在于默认规则中，以节省空间（Webkit浏览器将应用这些属性以及视差版本中的其他规则）.
为什么要使用
height:100%
而不是文章中提到的
height:100vh
？@LeandroRuel，因为百分比得到了更好的支持，而且它们似乎具有相同的效果，所以我决定使用它们而不是vh单位。我现在刚刚测试了将单位更改为vh，但没有解决IE 11.yep中的问题，但是，如果使用百分比进行设置，则还需要将
html，body
设置为
height:100%
，以使元素达到其高度的100%。或者可以使用固定的height@LeandroRuel，我认为默认情况下就是这样。另外，vh不受支持。@AndrewHansen问题在于
.back
您已将高度指定为50em，大致转换为50*16=800px，但您的
行高度：300px；
转换为900px，因为您有三个文本元素，因此使用whitspace。检查此小提琴我已删除图像，因为它未加载，url显示白色背景，高度更改为
60em
Hmm…奇怪的是他的对我不起作用。也许我的IE11安装有问题。我想我也注意到我的页面在IE中的显示有更根本的问题-没有视差！你说如果不增加高度，这是不起作用的。这是真的，这是问题的一部分。负边距应该去掉e增加了高度，但它不是。通过增加更多高度，“页面结尾”不再是页面的结尾，至少当我尝试过它的时候。无论如何，我想知道是否还有其他人在IE中也遇到了无视差的问题。这个演示在IE中确实可以正常工作，但它有点不同，因为背景图像是固定的，而不是以较慢的速度滚动。如果我尝试实现的视差系统失败，我将可能会还原为固定的背景图像。