纯CSS完成低版本浏览器友好提示
效果：
文章图片
html：
请升级浏览器版本
你正在使用旧版本浏览器。请升级浏览器以获得更好的体验。
ChromeFirefoxOperaEdgecss:此处的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中添加：
#browser-modal {
display: none;
}
即正常浏览器中，需要隐藏掉这个低版本提示，仅在你需要拦截的浏览器内核中展示即可。比如本例中，等于且低于ie9的内核都需要做拦截提示
【纯CSS完成低版本浏览器友好提示】附上一张浏览器精灵图
文章图片
推荐阅读
- PRO会员专区|【硬科技周报】第24周：聚变能科技企业“星环聚能”完成数亿元天使轮融资，电动垂直起降飞机开发商Overair获1.45亿美元融资
- 03|03 转换css元素的类别
- 02|02 CSS块级元素和行内元素
- 汽车|2022重庆车展：长安深蓝SL03纯电版预售17.98万起 | 一线车讯
- python|12 个要收藏的前端 CSS 网站
- 用 CSS 画三角形
- 10个css实现特效
- 汽车|欧洲大厂回归后的首款纯电家轿，试驾雷诺江铃·羿 | 钛度车评
- CSS 的一些技巧
- vue.js|vue3.x兼容tailwindcss(截至发帖)