Web ページを作成するときに、IE9+/Chrome/Firefox では基になるリンクをマスクできますが、IE6/7/8 ではマスクできません。
具体的なコードは次のとおりです:
rrree
ディスカッションへの返信 (解決策)
rgba は透過的で互換性がなく、特別なツールで処理する必要があります。
CSS 背景色属性値変換 v3
オンライン効果
完全なコード:
<!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>ログイン後にコピー
jikeytang へ:
ポップアップウィンドウが表示された後、「Sina」リンクがまだカバーされていません。助けてください。 (IE8 テスト)
デモ: http://a7d.net46.net/dark_mask_for_IE.php
IE システムは IE8 でのみテストされています
<!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>ログイン後にコピー
シャドウの前面にマスクを置きます
<!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>ログイン後にコピー
シャドウを与えるだけ 設定するだけ十分な大きさの Z インデックス。他の Z インデックスは必要ありません。
ボディの最後にシャドウを配置する場合、他の Z インデックスが使用されない場合は、Z インデックスを設定する必要はありません。シャドウのインデックス
3 階でマスクを使用するのは冗長です。シャドウに低バージョンの IE 固有の CSS を追加するだけです。
デモ: http://a7d.net46.net/dark_mask_for_IE.php
<div id="shadow"> <!--[if lte IE 8]><a id="mask"></a><![endif]--> ...
ログイン後にコピー
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%; 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>ログイン後にコピー
neorobin、素晴らしいですね! IE6/8は全て成功しました！ IE7では若干の問題はありますが、基本的には影響ありません。ちなみに、ieTesterを使ってテストしたのですが大丈夫でしょうか？
ネオロビン、すごい！ IE6/8は全て成功しました！ IE7では若干の問題はありますが、基本的には影響ありません。ちなみに、ieTesterを使ってテストしたのですが大丈夫でしょうか？
IETESTER を使ったことはありません。調べてみると、Microsoft 自体も https://www.modern.ie/zh-cn を提供しており、それと連携する BrowserStack も以前はあったと思います。開発は完了しました これらの仮想ブラウザ ソフトウェアまたはサービスは、最終的には実機上の実際のブラウザで動作することが最も保証されています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
