<!doctype html> <html> <head> <meta name="renderer" content="webkit"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Browser</title> <style type="text/css"> img{border:none;} a{ text-decoration: none; } #login { display:none; height:400px; width: 500px; position:absolute;/*讓節點脫離文檔流,我的理解就是,從頁面上浮出來,不再按照文檔其它內容佈局*/ top:20%;/*節點脫離了文檔流,如果設置位置需要用top和left,right,bottom定位*/ left:50%; margin-left: -250px; z-index:2;/*個人理解爲層級關係,由於這個節點要在頂部顯示,所以這個值比其餘節點的都大*/ background: white; } #over{ width: 100%; height: 100%; opacity:0.5;/*設置背景色透明度,1爲完全不透明,IE需要使用filter:alpha(opacity=80);*/ filter:alpha(opacity=50); display: none; position:absolute; top:0; left:0; z-index:1; background: #000; } .limit-top{ padding: 50px 95px; } .limit-top img{ display: inline-block; float: left; } .limit-top p{ margin:0 0 0 10px; width:250px ; float: left; display: inline-block; line-height: 25px; } .limit-bottom{ padding: 50px 95px; } .limit-bottom img{ margin: 0 15px; } </style> </head> <body> <div id="login"> <div class="limit-top"> <img src="../images/limit-top.png" height="46" width="46"/> <p>Hi,您當前的瀏覽器版本過低,可能存在安全風險,建議升級瀏覽器</p> </div> <div class="limit-bottom"> <a href="#"> <img src="../images/chrome.png" /> </a> <a href="#"> <img src="../images/firefox.png"/> </a> </div> </div> <div id="over"></div> </body> <script type="text/javascript"> var login = document.getElementById('login'); var over = document.getElementById('over'); function show() { login.style.display = "block"; over.style.display = "block"; } function hide() { login.style.display = "none"; over.style.display = "none"; } if(navigator.appName == "Microsoft Internet Explorer"&&parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<9){ show(); } </script> </html>
低版本瀏覽器提示升級
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.