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的，而 “模式”

回答

相关问题