Internet Explorer中，z-index的，而「模式」

下，在Firefox 3.6中，模擬覆蓋模式：Internet Explorer中，z-index的，而「模式」

<html> 
<body> 

    <div id="modal" style="position: fixed; 
     top: 0; left: 0;right: 0; bottom: 0; 
     background: rgba(255,0,0,0.5); 
     z-index: 10;"> 

     <div style="border-style:solid;border-width:5px; 
        position: fixed;top: 50%;left:50%"> 
      <h2>I am modal</h2> 
      <form><input type=submit></form> 
     </div> 
    </div> 


    <div id="notModal" style="height:500px; 
           border-style:solid;border-width:5px;"> 
     <div> 
      <h2>a I am not modal</h2> 
      <p>lorem ipsit dolar foo bar baz</p> 
      <form><input type=submit></form> 
     </div> 
    </div> 
</body> 
</html>

特別是，文本中的「莫代爾」分區可以選擇，並提交可以單擊「模式」div中的按鈕，但可以選擇或單擊「notModal」div中的任何內容。

在Internet Explorer 8中，情況並非如此;可以選擇「notModal」文本並且可以使用「notModal」提交。

有沒有辦法使這個工作在各種版本的IE下，而不使用JavaScript？

謝謝。

來源

2011-03-21 tpdi

IE有很多與透明度問題（它不支持rgba）。 z-indexing也存在已知的問題。

嘗試類似this。

注：

大多數IE z-index的問題可以通過應用Z-索引你想指定的z-index爲元素的父元素是固定的。
我將cover（之前modal）div中的模式窗口移出，以便IE不嘗試將過濾器應用於該窗口。

例
HTML

<div id="cover"></div> 
<div id="modalbox"> 
    <h2>I am modal</h2> 
    <form><input type=submit></form> 
</div> 

<div id="notModal"> 
    <div> 
     <h2>a I am not modal</h2> 
     <p>lorem ipsit dolar foo bar baz</p> 
     <form><input type=submit></form> 
    </div> 
</div>

CSS

body { 
    z-index: 1; 
} 
#cover { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    filter:alpha(opacity=50); /* Only applies to IE */ 
    background: red; /* This will be overwritten by browsers that support rgba */ 
    background: rgba(255,0,0,0.5); /* IE ignores this since it's not supported */ 
    z-index: 10; 
} 
#modalbox { 
    border:solid 5px #ccc; 
    position: fixed; 
    top: 50%; 
    left:50%; 
    z-index: 20; 
} 
#notModal { 
    height:500px; 
    border:solid 5px #ccc; 
    z-index: 5; 
}

來源

2011-03-21 21:58:34

OP這裏：該作品（IE 8中，至少，沒有測試它侵害他人但），但我仍然不確定它爲什麼有效。我以前嘗試過一個版本，其中身體有一個z-索引;是所有東西都有z-index的答案嗎？ – tpdi 2011-03-21 22:13:03

@tpdi：那麼，之前沒有工作的部分原因是因爲您沒有指定背景（正如我所提到的，在IE中不支持rgba）。最重要的是，可能會出現一些Z-索引問題。我把那個代碼放在那裏只是爲了好的措施。如果您想查看IE中z-index錯誤的詳細描述（以及如何解決它），請查看[here]（http://brenelz.com/blog/squish-the-internet-explorer-z-index -bug /）。請注意，它不一定需要將z-index放在所有內容上，只有父母纔可以，但在這種情況下''是父項。 – 2011-03-21 22:16:39

IE將不承認一個RGBA顏色，嘗試使用RGB和使用過濾器：α（不透明度= 50）

來源

2011-03-21 21:55:51 AlfonsoML

Internet Explorer中，z-index的，而 「模式」

回答

相關問題

Internet Explorer中，z-index的，而「模式」