正文中的背景图像：在 IE 上无法正常工作之前答案

【问题标题】：background-image in body:before on IE not working正文中的背景图像：在 IE 上无法正常工作之前
【发布时间】：2015-06-04 19:23:59
【问题描述】：

我创建了一个网页设计，使用 body:before 标签来“拆分”设计，类似于 WordPress 的 TwentyFifteen 主题 (https://wordpress.org/themes/twentyfifteen/)

但我没有为“左”列使用颜色，而是使用图像。该代码适用于所有浏览器（Chrome、FF、Safari），但不适用于 IE（版本 9-11）。

CSS 看起来像：

body::before {
    background: url("img/back-left.jpg") no-repeat center top ;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    content: "";
    display: block;
    height: 100%;
    min-height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 30%;
    z-index: 1;
}

效果：用IE打开页面时，背景图片不显示。当我去一个子站点时，图片正在显示。当我转换浏览器窗口时，图片正在显示。当我在 IE Dev 工具栏中更改任何内容（无论如何）时，图片正在显示。

如果我使用背景颜色而不是背景（或背景图像），它在 IE 上可以正常工作。

有什么想法吗？我认为这听起来像一个渲染的东西。背景图像渲染得太晚了，所以没有显示（相反我在页面上进行了交互）。但是如何解决呢？

【问题讨论】：

"left" 列表示侧边栏？
是的，这意味着侧边栏。在 TwentyFifteen 上有菜单链接的区域。
不使用body:before，为什么不直接使用已经存在的sidebar 元素？
我不使用 TwentyFifteen 主题。我写了一个自定义主题。它只是看起来很相似。我需要一个全屏背景图片提供身体：之前。
更正：问题只出现在 IE10 和 IE11 上。 IE9 显示正确。

标签： html css wordpress internet-explorer

【解决方案1】：

我找到了一个“解决方案”，但遇到了另一个问题。 ;-)

当我设置时

html, body { overflow: auto; }

然后，背景图像在IE 10和IE 11中正常显示。但是现在我遇到了IE 11平滑滚动问题（使用鼠标滚轮时背景图像跳得满地都是。使用滚动条时，它工作正常）。无论如何，这个变体对我来说比不显示背景图像更好。所以我仍然希望，MS 纠正平滑滚动的错误。

我用这个更正在 CodePen 中创建了一个分支：http://codepen.io/anon/pen/rabMMm

（这是最初的 CodePen 代码：http://codepen.io/anon/pen/qEwEVy）

或者有没有人知道解决 IE 平滑滚动问题的解决方案？

【讨论】：