55

当您在 Windows 8 中使用鼠标滚轮滚动时，固定的背景图像会疯狂地反弹。这只会影响 IE 10 和 IE 11。这也会影响元素position:fixed。这是一个具有固定背景图像的示例：

http://www.catcubed.com/test/bg-img-fixed.html

这是示例代码：

#section{
    position: fixed;
    top:0;
    left:0;
    background-color:#eee;
    background-position: top left;
    background-image: url("images/7.png");
    background-size: auto; 
    background-repeat: no-repeat;
    z-index: 10;
}

有没有办法让背景仍然在 IE 10 和 11 中？

4

6 回答 6

49

我知道答案有点晚了，但我遇到了同样的问题，并且能够通过将这些属性添加到我的 css 文件来解决它

html{
    overflow: hidden;
    height: 100%;    
}
body{
    overflow: auto;
    height: 100%;
}

从评论：

此解决方案阻止滚动事件在窗口上触发，因此如果您使用任何依赖于此类事件触发的东西，请务必小心。codepen.io/anon/pen/VawZEV?editors=1111（溢出：隐藏，滚动事件不起作用）codepen.io/anon/pen/PNoYXY?editors=1111（溢出：自动，滚动事件触发）- Dan Abrey

因此，这可能会导致您的项目出现一些问题。但我没有看到另一种方法来解决 IE 中的这个错误。

于 2014-09-14T20:34:18.997 回答
25

这看起来像一个 z-index 错误，请尝试添加 z-index: 1。

对此进行调查，我发现最好的调试方法是：

在页面顶部创建一个简单的元素，例如

 <style>#test {position: fixed; background: red; top: 0; left: 0; width: 4em}</style>
 <div id="test">Test</div>

在上述所有情况下，这都能正常工作，并且滚动流畅。所以这证明是可以做到的！现在慢慢地重新添加您的属性，直到您能够使位置固定的元素在您的站点上下文中工作。

然后我发现向固定项目添加 z-index 解决了这个问题。(例如 z-index: 1)

我还发现，一旦在子元素上设置了位置，该错误就会从该点向下/向前呈现它自己。

因此，您需要确保没有任何子元素具有位置集， 或者如果它们有，则显式为每个子元素设置一个位置。

例如

<!-- Works -->
<div style="position: fixed;">
    <div>Nice</div>
    <div>Wicked</div>
    <div>Cool</div>
</div>

<!-- Element with position: relative, experiences the bug -->
<div style="position: fixed;">
    <div style="position: relative;">sad</div>
    <div>sad</div>
    <div style="position: fixed;">happy</div>
</div>

它是可以修复的，但需要一些调整！

于 2014-04-28T11:32:10.690 回答
8

这是一种解决方法（在 Windows 8.1 上测试）：

将“背景”CSS 属性移动到 BODY 元素。目前它位于 id="filler" 的 DIV 元素上。这是生成的 CSS：

    body {
        font-family: Helvetica, Arial, sans-serif;
        background: #fff url(blue-kitty.jpg) no-repeat fixed center 100px;
    }

    #filler {
        text-align: center;
    }

    .big-margin {
        margin-top: 500px;
    }
于 2014-01-25T16:18:40.397 回答
4

尝试关闭平滑滚动选项。

Internet 选项 - 高级选项卡 - 使用平滑滚动

这就像渲染错误.... MS IE 团队正在调查....

于 2013-11-12T08:28:42.857 回答
3

只需简单地将主体容器定义为相对。

<style>
    body
    {
        position: relative;
    }
</style>
于 2014-02-24T19:09:16.100 回答
2

在我的情况下，解决方法是简单地从具有位置的元素中删除 z-index 属性：固定，然后 IE 停止了奇怪的闪烁。

（在拥有 z-index 属性时禁用 IE 选项上的平滑滚动有效，但这不是解决方案，因为用户很可能默认启用它）。

于 2014-10-12T04:28:49.710 回答