css - IE 10 和 11 使固定背景在使用鼠标滚轮滚动时跳转

标签 css image internet-explorer background fixed

当您在 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 中的背景保持静止?

最佳答案

我知道现在回答有点晚了,但我遇到了同样的问题,并且能够通过将这些属性添加到我的 css 文件中来修复它

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

来自评论:

This solution stops scroll events from firing on the window, so do be careful if you're using anything that relies on such events firing. codepen.io/anon/pen/VawZEV?editors=1111 ( overflow: hidden, scroll events don't work) codepen.io/anon/pen/PNoYXY?editors=1111 ( overflow: auto, scroll events fire) - Dan Abrey

所以这可能会导致您的元素出现一些问题。但我没有看到另一种解决 IE 中这个错误的方法。

关于css - IE 10 和 11 使固定背景在使用鼠标滚轮滚动时跳转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19377810/

相关文章:

javascript - 如何在开始时将 react 可拖动元素居中? (模态,div)

css - 为什么图像垂直居中且 `line-height` 位于它们应在的位置下方 2 个像素?

Css image-rollover link problem - 无法让导航在 IE 中水平显示

c# - 如何在尝试加载之前检查 jpeg 图像文件是否实际上是有效图像?

javascript - 使图像在 div 内滚动

php - 如何在网站中使用我们自己的字体,与所有用户兼容?

html - @media 查询似乎不起作用

css - :hover not moving file 上的 IE8 背景位置

internet-explorer - 网站图标在 IE 中不工作

html - 在 Bootstrap 中,为什么我的文本顶部不与相邻元素对齐?