IE8弹出窗口不能遮罩底层的链接，怎么办？_html/css

制作网页时，做了一个弹出窗口，IE9+/Chrome/Firefox都能将底层链接遮罩，但IE6/7/8不能遮罩，请问怎么办？
具体代码如下：

<!DOCTYPE html><html>  <head>	<style>	* {font-family:宋体; font-size:12px; border:0;}	</style>  	<script type="text/javascript">		function edit()		{						document.getElementById("shadow").style.visibility = 'visible';		}  	</script>  </head>  <body>  	<div id="shadow" style="text-align:center; visibility:hidden; position:absolute; left:0; top:0; width:100%; height:100%; background-color: rgba(0,0,0,0.5); z-index:100; border:0; overflow:hidden;">  		<div style="border:1px solid #57667d; background-color:#dfe8f6; top:50%; left:50%; width:502px; height:342px; margin:-171px 0 0 -251px; position: absolute; z-index:101; box-shadow:6px 8px 6px #666;" >  			<div style="float:right; margin-right:7px; margin-top:5px;"><a href="#" title="关闭" onclick="document.getElementById('shadow').style.visibility = 'hidden';">X</a></div>			<div id="editbox" style="width:100%; margin-top:30px;">我是弹出窗口，在IE6/7/8下不能遮罩住上面的超链接。请问怎么办？</div>		</div>  	</div>	<div id="content" style="width:100%; height:300px; top:80px; left:0; border:0; background-color:white; text-align:center; position:absolute; z-index:0;">	<a href="#" onclick="edit()">弹出窗口</a>  <a href="http://www.sina.com.cn">新浪网</a>	</div>  </body></html>

로그인 후 복사

回复讨论(解决方案)

rgba这个透明不兼容，需要用特别的工具来处理掉。
CSS背景颜色属性值转换 v3
在线效果
完整代码：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <style>        *{ font-family:'宋体'; font-size:12px; border:0; }        .a {            filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7F000000', endColorstr='#7F000000');        }        :root .a {            filter:none;	 /*处理IE9浏览器中的滤镜效果*/            background-color:rgba(0,0,0,0.5);        }    </style>    <script type="text/javascript">        function edit(){            document.getElementById("shadow").style.visibility = 'visible';        }    </script></head><body><div id="shadow" class="a" style="text-align:center; visibility:hidden; position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:100; border:0; overflow:hidden;">    <div style="border:1px solid #57667d; background-color:#dfe8f6; top:50%; left:50%; width:502px; height:342px; margin:-171px 0 0 -251px; position: absolute; z-index:101; box-shadow:6px 8px 6px #666;">        <div style="float:right; margin-right:7px; margin-top:5px;">            <a href="#" title="关闭" onclick="document.getElementById('shadow').style.visibility = 'hidden';">X</a>        </div>        <div id="editbox" style="width:100%; margin-top:30px;">我是弹出窗口，在IE6/7/8下不能遮罩住上面的超链接。请问怎么办？</div>    </div></div><div id="content" style="width:100%; height:300px; top:80px; left:0; border:0; background-color:white; text-align:center; position:absolute;z-index:0;">    <a href="#" onclick="edit()">弹出窗口</a>          <a href="http://www.sina.com.cn">新浪网</a></div></body></html>

로그인 후 복사

To jikeytang:

弹窗出现后，仍然没有遮罩住“新浪网”这个链接，请再帮忙看看。（IE8测试）

演示: http://a7d.net46.net/dark_mask_for_IE.php

IE 系仅在 IE8 测试

<!DOCTYPE html><html><head><style>* {	font-family: 宋体;	font-size: 12px;	border: 0;    margin:0;    padding:0;}#shadow {	text-align: center;	visibility: hidden;	position: absolute;	left: 0;	top: 0;	width: 100%;	height: 100%;	background-color: rgba(0, 0, 0, 0.5);	z-index: 100;	border: 0;	overflow: hidden;}#shadow>div {	border: 1px solid #57667d;	background-color: #dfe8f6;	top: 50%;	left: 50%;	height: 342px;	width: 502px;	margin: -171px auto auto -251px;	position: absolute;	z-index: 101;	box-shadow: 6px 8px 6px #666;}#x_btn {	float: right;	margin-right: 7px;	margin-top: 5px;}#editbox {	width: 100%;	margin-top: 30px;}#content {	width: 100%;	height: 300px;	top: 80px;	left: 0;	border: 0;	background-color: white;	text-align: center;	position: absolute;	z-index: 0;}</style><!--[if lte IE 8]><style>#mask {    display: block;    width:100%;    height:100%;    position: absolute;    background-color: black;    filter:Alpha(Opacity=50);    /* 调试用 */    /*    box-sizing: border-box;    border:20px green solid;    */}</style><![endif]--></head><body>	<div id="shadow">		<div>			<div id="x_btn">				<a href="#" title="关闭" onclick="shadow.style.visibility = 'hidden';">X</a>			</div>			<div id="editbox">我是弹出窗口，在IE6/7/8下不能遮罩住上面的超链接。请问怎么办？</div>		</div>        <!--[if lte IE 8]><a id="mask"></a><![endif]-->	</div>	<div id="content">		<a href="#" onclick="edit()">弹出窗口</a> <a href="http://www.sina.com.cn">新浪网</a>	</div></body></html><script type="text/javascript">    function edit() {        shadow.style.visibility = 'visible';    }</script>

로그인 후 복사

把 mask 放在 shadow 里最前面位置

    <div id="shadow">        <!--[if lte IE 8]><a id="mask"></a><![endif]-->        ...

로그인 후 복사

只需给 shadow 设置一个足够大的 z-index 就行了, 其他的 z-index 都不需要了;

如果把 shadow 放在 body 的最后部, 在没有用其他 z-index 的情况下, shadow 也不用设置 z-index 了

3楼用了一个 mask 是多余的, 只需要给 shadow 加上低版本 IE 专用的 CSS 就行了
演示: http://a7d.net46.net/dark_mask_for_IE.php

<!DOCTYPE html><html><head><style>* {    font-family: 宋体;    font-size: 12px;    border: 0;    margin:0;    padding:0;}#shadow {    text-align: center;    visibility: hidden;    position: absolute;    left: 0;    top: 0;    width: 100%;    height: 100%;    background-color: rgba(0, 0, 0, 0.5);    border: 0;    overflow: hidden;}#shadow>div {    border: 1px solid #57667d;    background-color: #dfe8f6;    top: 50%;    left: 50%;    height: 342px;    width: 502px;    margin: -171px auto auto -251px;    position: absolute;    box-shadow: 6px 8px 6px #666;}#x_btn {    float: right;    margin-right: 7px;    margin-top: 5px;}#editbox {    width: 100%;    margin-top: 30px;}#content {    width: 100%;    height: 300px;    top: 80px;    left: 0;    border: 0;    background-color: white;    text-align: center;    position: absolute;}</style><!--[if lte IE 8]><style>#shadow {    background-color: black;    filter:Alpha(Opacity=50);}</style><![endif]--></head><body>    <div id="content">        <a href="#" onclick="edit()">弹出窗口</a>        <a href="http://www.sina.com.cn">新浪网</a>    </div>    <div id="shadow">        <div>            <div id="x_btn">                <a href="#" title="关闭" onclick="shadow.style.visibility = 'hidden';">X</a>            </div>            <div id="editbox">我是弹出窗口，在IE6/7/8下不能遮罩住上面的超链接。请问怎么办？</div>        </div>    </div></body></html><script type="text/javascript">    function edit() {        shadow.style.visibility = 'visible';    }</script>

로그인 후 복사

To neorobin:

5楼的代码在IE8下通过了，非常感谢！再请教一下，IE6下怎么办呢？

演示: http://a7d.net46.net/dark_mask_for_IE.php
IE 6: height: 100%; 不支持; a>b 选择器不支持.

以下代码 IE6 已测试通过. IE7 没安装, 没做测试

<!DOCTYPE html><html><head><style>* {    font-family: 宋体;    font-size: 12px;    border: 0;    margin:0;    padding:0;}#shadow {    text-align: center;    visibility: hidden;    position: absolute;    left: 0;    top: 0;    width: 100%;    height: 100%;    _height:expression(document.documentElement.clientHeight+"px"); /* for IE6 */       background-color: rgba(0, 0, 0, 0.5);    border: 0;    overflow: hidden;}#diagbox {    border: 1px solid #57667d;    background-color: #dfe8f6;    top: 50%;    left: 50%;    height: 342px;    width: 502px;    margin: -171px auto auto -251px;    position: absolute;    box-shadow: 6px 8px 6px #666;}#x_btn {    float: right;    margin-right: 7px;    margin-top: 5px;}#editbox {    width: 100%;    margin-top: 30px;}#content {    width: 100%;    height: 300px;    top: 80px;    left: 0;    border: 0;    background-color: white;    text-align: center;    position: absolute;}</style><!--[if lte IE 8]><style>#shadow {    background-color: black;    filter:Alpha(Opacity=50);}</style><![endif]--></head><body>    <div id="content">        <a href="#" onclick="edit()">弹出窗口</a>        <a href="http://www.sina.com.cn">新浪网</a>    </div>    <div id="shadow">        <div id="diagbox">            <div id="x_btn">                <a href="#" title="关闭" onclick="shadow.style.visibility = 'hidden';">X</a>            </div>            <div id="editbox">我是弹出窗口，在IE6/7/8下不能遮罩住上面的超链接。请问怎么办？</div>        </div>    </div></body></html><script type="text/javascript">    function edit() {        shadow.style.visibility = 'visible';    }</script>

로그인 후 복사

neorobin，真牛！ IE6/8都成功了！IE7虽然有点问题，但基本不影响了。对了，请教一下，我是用ieTester测试的，可以吗？

我没有用过 IETESTER, 搜了下, 微软自己也提供了一个 https://www.modern.ie/zh-cn, 还有个与它合作的 BrowserStack. 收费的, 我觉得开发完成前可以用下这些虚拟的浏览器软件或者服务, 到最后还是在实机真实浏览器上跑最有保证