IE8弹出窗口不能遮罩底层的链接，怎么办？_html/css_WEB-ITnose
- WBOY原創
- 2016-06-24 11:39:151119瀏覽
制作网页时，做了一个弹出窗口，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测试的，可以吗？
neorobin，真牛！ IE6/8都成功了！IE7虽然有点问题，但基本不影响了。对了，请教一下，我是用ieTester测试的，可以吗？
我没有用过 IETESTER, 搜了下, 微软自己也提供了一个 https://www.modern.ie/zh-cn, 还有个与它合作的 BrowserStack. 收费的, 我觉得开发完成前可以用下这些虚拟的浏览器软件或者服务, 到最后还是在实机真实浏览器上跑最有保证
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn