4

我在 IE10 触摸设备上遇到大型固定背景图像的问题。（我有一个装有 Windows 8 的三星 Slate，但我猜测在 Surface 上可以看到相同的行为，但无法确认。）

要将大型固定图像作为网站的背景，有两种方法：

1) 在 body 元素上使用 CSS3 背景属性 - 这在 IE10 触摸设备上运行良好。但是，背景会随着 iOS 浏览器中的视口滚动。所以进入第 2 步。

2) 将背景图像放置在 body 元素内，作为内联图像或 div 内。将图像（或包含 div）设置为具有低 z-index 的位置固定。这解决了 iOS 问题，并且在我测试过的所有浏览器上都可以正常工作，除非在 IE10 上进行触摸滚动。背景图像在滚动过程中“抖动”或上下闪烁几个像素。一旦滚动结束，一切都被正确渲染了，但抖动效果看起来很糟糕。在 body 上使用 CSS3 背景属性时不会发生这种情况。

要查看此效果的一个简单站点是使用 IE10 触摸设备并浏览到Backstretch。这个 jQuery 插件在 body 的 div 中使用图像。

我很困惑如何解决这个问题。这可能只是一个渲染错误，但它很烦人，迫使我决定支持哪个浏览器。有任何想法吗？

4

1 回答 1

0

一个快速简单的解决方案是使用布局引擎。Layout Engine 使用浏览器特征检测来检测访问者的浏览器/浏览器版本，并在 html 标签中添加相应的样式（类似于 Modernizr）。它检测许多流行的浏览器，包括一些移动浏览器，以及 IE7、IE8、IE9、IE10 和 IE11。这很有用，因为抖动也会出现在 IE11 触摸中。

使用IE10和IE11独有的样式给body添加背景样式并关闭默认背景，解决了IE10和IE11 touch的背景抖动问题，在相当繁重的设备/浏览器测试中表现良好。正文背景在 iOS 或其他浏览器中没有显示，额外的 JavaScript 对移动下载速度的影响很小，但稍微明显。

http://mattstow.com/layout-engine.html

其他解决方案包括 CSS hack，以及针对 IE10 和 IE11 的 JavaScript 检测（类似于上面）。在使用 css hack 和基于用户代理检测的 JavaScript 解决方案时，请注意您的样式不适用于其他浏览器版本。

您可能已经知道这一点，但固定的背景是有问题的，并且在移动设备中也会出现抖动。一种解决方案是应用 background-attachment:scroll 而不是 background-attachment:fixed; 用于移动设备的背景。针对移动设备的可能解决方案包括使用“max-device-width”来定位较小的功能手机和智能手机屏幕尺寸的媒体查询，和/或使用 Categorizr.js（通过浏览器用户代理检测移动设备、平板电脑、桌面设备、电视和将适当的样式添加到 html 标签）。

于 2013-10-11T03:31:01.550 回答