Heim > Artikel > Web-Frontend > IE8弹出窗口不能遮罩底层的链接，怎么办？_html/css_WEB-ITnose
IE8弹出窗口不能遮罩底层的链接，怎么办？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:151124Durchsuche
制作网页时，做了一个弹出窗口，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. 收费的, 我觉得开发完成前可以用下这些虚拟的浏览器软件或者服务, 到最后还是在实机真实浏览器上跑最有保证
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：记一些浏览器缓存以前不太熟悉的东西_html/css_WEB-ITnoseNächster Artikel：关于IE6浮动问题！_html/css_WEB-ITnose