gpt4 book ai didi

html - Internet Explorer、z-index 和 "modality"

转载 作者:太空宇宙 更新时间:2023-11-03 20:23:16 24 4
gpt4 key购买 nike

在 Firefox 3.6 中,以下模拟模式覆盖:

<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>

特别是,“modal”div 中的文本可以被选中,“modal”div 中的提交按钮可以被点击,但是“notModal”div 中的任何内容都不能被选择或点击。

在 Internet Explorer 8 中,情况并非如此;可以选择“notModal”文本并点击“notModal”提交。

有没有办法在不使用 javascript 的情况下使它在各种版本的 IE 下工作?

谢谢。

最佳答案

IE 在透明度方面有很多问题(它不支持 rgba)。 z-indexing 也存在已知问题。

试试像 this 这样的东西.

注意事项:

  • 大多数 IE z-index 问题都可以通过将 z-index 应用于您尝试为其指定 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;
}

关于html - Internet Explorer、z-index 和 "modality",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5384162/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com