成果:
html:
<div id=browser-modal>
<div class=browser-modal-cover></div>
<div class=browser-content>
<div class=browser-text>
<h3 class=browser-text-title> 请降级浏览器版本 </h3>
<p class=browser-text-desc> 你正在应用旧版本浏览器。请降级浏览器以取得更好的体验。</p>
</div>
<div class=browser-list>
<div class=browser-item>
<a href="https://www.google.cn/chrome/" target=_blank>
<div class="iconfont iconchrome"></div>
<h4>Chrome</h4>
</a>
</div>
<div class=browser-item>
<a href="http://www.firefox.com.cn/" target=_blank>
<div class="iconfont iconfirefox"></div>
<h4>Firefox</h4>
</a>
</div>
<div class=browser-item>
<a href="https://www.opera.com/zh-cn" target=_blank>
<div class="iconfont iconopera"></div>
<h4>Opera</h4>
</a>
</div>
<div class=browser-item>
<a href="https://www.microsoft.com/zh-cn/edge" target=_blank>
<div class="iconfont iconEdge"></div>
<h4>Edge</h4>
</a>
</div>
</div>
</div>
</div>
css: 此处的 CSS 能够写到失常的 css 文件中,只有 DOM 中引入该款式即可
/* ie8 提醒款式 */
#browser-modal {
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
color: #303233;
position: fixed;
z-index: 9990009;
}
#browser-modal .browser-modal-cover {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #111;
opacity: 0.9;
z-index: -1;
}
#browser-modal .browser-content {
width: 700px;
margin-top: 120px;
margin-left: auto;
margin-right: auto;
padding-bottom: 80px;
padding-top: 50px;
background-color: #fff;
border-radius: 5px;
}
#browser-modal .browser-content .browser-dpc-logo img {
height: 42px;
margin: 45px auto 40px;
}
#browser-modal .browser-content .browser-text-title {
text-transform: uppercase;
font-size: 24px;
}
#browser-modal .browser-content .browser-text-desc {
margin-top: 30px;
margin-bottom: 20px;
font-size: 14px;
}
#browser-modal .browser-content .browser-list {
width: 600px;
margin: 20px auto;
height: 130px;
}
#browser-modal .browser-content .browser-item {
float: left;
width: 150px;
padding-top: 20px;
padding-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
#browser-modal .browser-content .browser-item .iconfont {
width: 100px;
height: 100px;
margin: 0 auto;
font-size: 80px;
line-height: 80px;
margin-bottom: 10px;
}
#browser-modal .browser-content .browser-item .iconchrome {background: url("./images/browse.png") no-repeat 0 0;
}
#browser-modal .browser-content .browser-item .iconfirefox {background: url("./images/browse.png") no-repeat 0 -100px;
}
#browser-modal .browser-content .browser-item .iconopera {background: url("./images/browse.png") no-repeat 0 -200px;
}
#browser-modal .browser-content .browser-item .iconEdge {background: url("./images/browse.png") no-repeat 0 -300px;
}
#browser-modal .browser-content .browser-item a {
cursor: pointer;
display: block;
}
#browser-modal .browser-content .browser-item a img {
display: block;
margin: 0 auto;
max-width: 100px;
width: 100px;
height: 100px;
}
#browser-modal .browser-content .browser-item a h4 {
text-align: center;
margin-top: 20px;
font-size: 18px;
font-weight: 700;
}
在 html 中做兼容解决。html-header 中增加:
<!--[if lte IE 9]>
<style>
#browser-modal {display: block !important;}
</style>
<![endif]-->
<style>
#browser-modal {display: none;}
</style>
即失常浏览器中,须要暗藏掉这个低版本提醒,仅在你须要拦挡的浏览器内核中展现即可。比方本例中,等于且低于 ie9 的内核都须要做拦挡提醒
附上一张浏览器精灵图