Question

我再次寻求集体的帮助。我创建了一个网站，在IE浏览器中滚动不稳定但在所有其他浏览器中都很流畅。我检查了两台不同的笔记本电脑，以确保它不仅仅是我的视频卡。

我还删除了所有图像以查看它是否是图像显示问题并且无法解决问题。有没有人有任何想法？

更新*：根据反馈，我还尝试删除图像，框阴影和谷歌字体的页面，我仍然得到了波涛汹涌的卷轴。我现在也刚刚删除了导航和侧面横幅...呃仍然没有好处。

发现它：好吧，基本上用css篇解构我的网站后，我发现不稳定屏幕的原因是（大部分）由于使用了border-radius属性（感谢把我指向那个方向）。我的页面有两个容器div，我将以下css应用于： -moz-border-radius：10px; -webkit-border-radius：10px; border-radius：10px;

一旦我删除了这些页面，90％更顺畅。我仍然得到一些不连贯的滚动，因为它看起来像标题图像，但它更好。

**最终解决方案是： 1.添加条件IE专门用于在通过IE浏览器查看时禁用border-radius 2.删除最后一点不稳定:)我拍了我正在使用的所有图像，在photoshop中为它们创建了一个精灵，然后使用雅虎Smush-It来压缩该文件。该网站现在加载很棒。

感谢所有输入！

我的网址是http://monopolydealrules.com

谢谢！

Answer 1

**最终解决方案是：1。添加条件IE专门用于在通过IE浏览器2查看时禁用border-radius。要删除最后一点不稳定:)我拍摄了我正在使用的所有图像，在photoshop中为他们创建了一个精灵，然后使用雅虎Smush-It压缩该文件。该网站现在加载很棒。

谢谢大家的见解！

更新*我的iphone手机版也遇到了类似的问题。从容器元素中删除border-radius属性也修复了我的移动网站的速度。

Answer 2

你的盒子阴影很可能导致这个问题。没有大量的文档，但通常建议不要使用那么大的CSS框阴影。

http://nerds.airbnb.com/box-shadows-are-expensive-to-paint

Answer 3

我有一个复杂的布局，IE9也适合我。在我的情况下，具有完整布局的常规页面滚动得很好，但是当在相同的布局中添加ckeditor时，滚动变得非常不稳定。我猜IE不能同时渲染圆角和复杂的UI。

我用它来修复它：

<!--[if lt IE 10]>
<style type="text/css">
* {
-webkit-border-radius: 0px !important; 
-khtml-border-radius: 0px !important; 
-moz-border-radius: 0px !important; 
border-radius: 0px !important; 
}
</style>
<![endif]-->

滚动时在IE中的网站Choppy但在Firefox / Chrome / Safari中没有

3 个答案: