在ie7和ie6中使用css进行图像定位

问题描述：

我试图将所有图像放在登录屏幕后面的网页上，但似乎无法完成此项工作。我试过使用z-index，但这也没有帮助。我想知道是否有人能帮我解决这个问题。以下是我的问题的屏幕截图：http://img64.imageshack.us/img64/1267/uplad.png。我试图让所有图像都保留在黑色图像的后面，并且在所有内容的前面都有登录屏幕。在ie7和ie6中使用css进行图像定位

CSS

CSS的图像

img 
{ 

    -webkit-box-shadow: #666 0px 2px 3px; 
    -moz-box-shadow: #666 0px 2px 3px; 
    box-shadow: #666 0px 2px 3px; 
    border: 1px solid #ccc; 
    float: left; 
    background-color: #fff; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    z-index:0; 
}

CSS黑色背景

element.style { 

    height: 1843px; 
    left: 0; 
    position: fixed; 
    top: 0; 
    width: 1263px; 
    z-index: 10000; 
} 

.modalBackground { 

    background-color: #000000; 
    opacity: 0.5; 
}

CSS的登录画面

element.style { 

    display: block; 
    margin-left: -225px; 
    margin-top: -212px; 
} 

.pagepopups .popup { 

    -moz-border-radius: 5px 5px 5px 5px; 
    -moz-box-shadow: 0 0 3px #333333; 
    background-color: #006699; 
    display: none; 
    left: 50%; 
    padding: 11px 10px; 
    position: absolute; 
    top: 50%; 
    z-index: 10001; 
}

邮政相关的CSS和HTML。 – 2011-03-22 18:16:26

对不起。我已经发布了CSS。有太多的HTML发布，还有很多的C＃代码以及 – 2011-03-22 18:22:05

我想出了谢谢。如果你想知道解决方案，让我知道，我会在这里发布 – 2011-03-22 18:29:05

答

Z-index似乎是你想要的。在Internet Explorer中存在一个已知的z-index错误，它不像其他浏览器那样严格遵循z-index。幸运的是，有一个简单的解决方法。您需要在父元素上指定z-index，直到您试图指定z-index的所有元素的容器为止。我认为问题在于IE为每个元素创建一个“z-index上下文”，除非父元素具有z-index。 Here's描述问题以及如何解决问题的良好链接。

这很有帮助，我开始看到z-index如何在IE中真正起作用。谢谢 – 2011-03-22 19:09:42

@Zeeshan Raja：不客气。很高兴我能帮上忙。记住这一点，如果你有其他Z指数问题。 – 2011-03-22 19:48:32

+1 +1（和正确答案）：p – thirtydot 2011-03-22 20:16:02

答

您未能使图像完全匿名（精选上..按钮），我用Google搜索活动网站，它有你所描述的问题，所以我假定这是你相同的版本”重新工作。

只在IE7

测试：

添加到.header一个规则：z-index: 10000。
这是在IE7中修复的。
它可能也会在IE6中修复，但如果没有，请让我知道，我会看看。

你很幸运，你没有匿名化得当:)

+1努力（和正确答案）。 :) – 2011-03-22 18:45:26

我解决了这个问题，但现在我遇到了其他popUps问题，如登录屏幕 – 2011-03-22 18:50:15

在ie7和ie6中使用css进行图像定位

相关推荐