关于IE6下背景图片固定定位不起作用失效的原因
要写一个空间代码,实现的效果之一就是背景图片固定在页面上,不随浏览器滚动而滚动,但是却遇到了一个问题,就是IE6下背景图片固定不起作用了(IE7,firefox火狐浏览器等都可实现背景固定)。
这是很奇怪的,以前用同样的代码是一点问题都没有的,这次为何不行呢?
待我慢慢叙来……
使背景图片固定代码如下:
body{background:url(xx.jpg) fixed 50% 50%;}
在各个浏览器下的表现都是背景固定,您有兴趣可以随便找一张图试试。
但是,今天同样的针对body的代码却没有用,问什么呢?
原来是common.css里面什么样式产生了影响。好,现在删除common样式,看看哪儿有问题。
结果才删除第一行,就显示OK了,
看来是common.css样式的第一行有问题啊:
?
第一行内容如下:
body,html{margin:0;padding:0}
?
很一般般的样式定义吗?
可我一把“,html”删除,结果显示好了,我顿时豁然开朗。由于对HTML进行了样式定义,IE6就把HTML当做根节点处理了,结果background:fixed就不管用了,后首行代码修改如下,就一切显示正常的啦!
body{margin:0;padding:0}
?
总结:之所以IE6下背景图片固定定位不起作用失效,是因为样式文件里对html标签进行了一些定义,从而使html标签变成根节点,body为非根节点,导致IE6下背景图片固定定位不起作用失效。