纯CSS补全低版本浏览器友好小贴士
时间：2023-03-28 18:48:24
HTML
请升级您的浏览器版本您正在使用旧版本的浏览器。请升级您的浏览器以获得更好的体验。 Chrome
Firefox
Opera
Edge
css：这里的CSS可以正常写在css文件，只要在DOM中引入样式即可/*ie8提示样式*/#browser-modal{width:100%;高度：100%；顶部：0；左：0；文本对齐：居中；颜色：#303233；位置：固定；z-索引：9990009；}#browser-modal.browser-modal-cover{位置：固定；左：0；顶部：0；高度：100%；宽度：100%；背景色：#111；不透明度：0.9；z-指数：-1；}#browser-modal.browser-content{宽度：700px；顶部边距：120px；左边距：自动；右边距：自动；填充底部：80px；填充顶部：50px；背景色：#fff；边界半径：5px；}#browser-modal.browser-content.browser-dpc-logoimg{height:42px;边距：45px自动40px；}#browser-modal.browser-content.browser-text-title{文本转换：大写；字体大小：24px；}#browser-modal.browser-content.browser-text-desc{margin-top:30px;底部边距：20px；字体大小：14px；}#browser-modal.browser-content.browser-list{width:600px;边距：20px自动；高度：130px；}#browser-modal.browser-content.browser-item{浮动：左；宽度：150px；填充顶部：20px；填充底部：20px；左边距：自动；右边距：自动；}#browser-modal.browser-content.browser-item.iconfont{width:100px;高度：100px；保证金：0自动；字体大小：80px；行高：80px；底部边距：10px；}#browser-modal.browser-content.browser-item.iconchrome{背景：url("./images/browse.png")no-repeat00;}#browser-modal.browser-content.browser-item.iconfirefox{背景：url("./images/browse.png")no-repeat0-100px;}#browser-modal.browser-content.browser-item.iconopera{背景：url("./images/browse.png")不重复0-200px;}#browser-modal.browser-content.browser-item.iconEdge{背景：url("./images/browse.png")不重复0-300px;}#browser-modal.browser-content.browser-itema{cursor:pointer;display:block;}#browser-modal.browser-content.browser-itemaimg{display:block;margin:0auto;max-width:100px;width:100px;height:100px;}#browser-modal.browser-content.browser-itemah4{text-align:center;margin-top:20px;font-size:18px;font-weight:700;}在html中做兼顾处理在html-header中添加：即在普通浏览器中，需要隐藏这个低版本提示，只在需要拦截的浏览器内核中显示。比如本例中，等于和低于ie9的内核需要拦截提示附加一个浏览器精灵
