在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; 
}

來源

2011-03-22 Zeeshan Raja

郵政相關的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描述問題以及如何解決問題的良好鏈接。

來源

2011-03-22 18:33:06

這很有幫助，我開始看到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中修復，但如果沒有，請讓我知道，我會看看。

你很幸運，你沒有匿名化得當:)

來源

2011-03-22 18:37:00 thirtydot

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

我解決了這個問題，但現在我遇到了其他popUps問題，如登錄屏幕 – 2011-03-22 18:50:15

在ie7和ie6中使用css進行圖像定位

回答

相關問題