成果：
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的内核都须要做拦挡提醒
附上一张浏览器精灵图