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

出现的浏览器：IE6IE7（在firefox中正常没问题）

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

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

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

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