WEB开发网
开发学院网页设计DivCss IE浏览器中内容和背景分离的bug 阅读

IE浏览器中内容和背景分离的bug

 2007-12-24 22:59:11 来源:WEB开发网   
核心提示:出现的浏览器:IE6 IE7(在firefox中正常没问题)问题现象:div的内容(包括文字,图片,IE浏览器中内容和背景分离的bug,表单等)和背景分离开了看起来像在两个不同的层里面一样,本来是为了实现一个可变背景的页面,#main{position:relative;z-index:1;}#ba

出现的浏览器:IE6 IE7(在firefox中正常没问题)

问题现象:div的内容(包括文字,图片,表单等)和背景分离开了看起来像在两个不同的层里面一样。

本来是为了实现一个可变背景的页面,让页面的背景颜色和透明度可变(即下面代码中的id=main的div),但是内容的颜色和透明度不随背景变而变(即id=content的div),于是需要在内容层的下面加一个z-index比它低的层(即id=background的div)来做背景,再用js来让background层的高度自动等于main的高度(这里为了说明主要问题省去自动对齐高度的js部分。)

为了让background的div做main的背景,需要让background div的位置和main的位置自动对齐,于是就需要用css的position来对齐它们的位置。让background的坐标是main的left:0,top:0的位置上。
但是这样之后,内容content div的背景看起来就和内容分离开了,看起来像是分别在两个不同的层里面,而background div就处在这两个层之间,把它们分离开了。

看看下面的代码运行效果:

解决办法:给内容和背景分离的div 即id=content的层加上一个明确的高度,或者是宽度可以解决,比如:width:100%;height:100%;
在下面的代码中就会得到IE6 IE7 firefox中都正确的结果:

时间:20070618

Tags:IE 浏览器

编辑录入:coldstar [复制链接] [打 印]
赞助商链接