Fatal编程技术网
  • html/
  • Html 位置：带有图像的固定背景DIV使滚动变慢：如何为浏览器兼容性制定条件CSS规则？

Html 位置：带有图像的固定背景DIV使滚动变慢：如何为浏览器兼容性制定条件CSS规则？

html css browser

Html 位置：带有图像的固定背景DIV使滚动变慢：如何为浏览器兼容性制定条件CSS规则？,html,css,browser,background,cross-browser,Html,Css,Browser,Background,Cross Browser,一个已知的老问题是，无论是IE 7（可能也是IE 8）还是FireFox 3.0~3.6，当背景图像img或div具有图像时，都会经历非常缓慢的网页向下滚动：固定属性 在建立了一个具有此功能的网站后，我注意到在IE7（可能也是8）中，滚动速度非常慢的体验破坏了整个网站的良好享受。所有其他JQuery效果也不再平滑。现在，只要我评论了位置：fixed背景图像div的属性：img，一切又变好了 <html><head> img#bg { /* position:fixed;

一个已知的老问题是，无论是IE 7（可能也是IE 8）还是FireFox 3.0~3.6，当背景图像
img
或
div
具有图像时，都会经历非常缓慢的网页向下滚动：固定属性

在建立了一个具有此功能的网站后，我注意到在IE7（可能也是8）中，滚动速度非常慢的体验破坏了整个网站的良好享受。所有其他JQuery效果也不再平滑。现在，只要我评论了
位置：fixed背景图像div的属性：img，一切又变好了


<html><head>
img#bg {
/*  position:fixed;*/
    top:0;
    left:0;
    height:auto;
    min-height:100%; /* proportionally fit height (eg panorama images)  */
    width: 100%;
    z-index:-2;
}
</head>
<body><img src="background.jpg" id="bg"/></body>
</html>




img#bg{
/*位置：固定*/
排名：0；
左：0；
高度：自动；
最小高度：100%；/*比例适合高度（如全景图像）*/
宽度：100%；
z指数：-2；
}


Q1：如何使该行有条件？使用IE7或IE8的用户
/*位置：固定*/和具有IE9或FF4的用户位置：固定

Q2：除了
position:fixed之外，我的css中有什么东西触发了这个bug吗？
例如
img#bg
应该以不同的方式编写吗

一些链接：

非常感谢您对本浏览器的建议和想法。非常感谢

Q1：如何使该行有条件？

对于版本9之前的IE，始终存在条件注释覆盖：


<!--[if lt IE 9]>
<style>img#bg { position: absolute; }</style>
<![endif]-->






对于Firefox来说，一种方法是找到一些使版本4不同于其前身的黑客，我现在真的想不起来

Q2：除了
position:fixed之外，我的css中还有什么东西触发了这个bug吗？

事实上，这是一个图像。但大多是固定的定位。如果将背景图像与
背景附件一起使用，也会发生这种情况：已修复
，这是这些浏览器上众所周知的性能问题

问题1：如何使该行有条件？
如果您不想使用条件注释（根据BoltClock的回复），可以在上找到特定于浏览器的CSS攻击摘要

问题2：除了
position:fixed
，我的css中还有什么东西触发了这个bug吗？
简短回答：是的，但可能没有
位置：固定的。如果删除它可以解决您的问题，那么这是您最大的问题

稍长一点的回答：
方框阴影已显示会导致性能问题。IE的专有过滤器也将如此。有时会提到低效的选择器，但它们是否有很大的影响还存在争议


要分析您的代码，请使用向下钻取导致浏览器出现问题的选择器。太棒了
 我真的不提倡使用黑客，尤其是对于Firefox这样的符合标准的浏览器。