2021-11-19  点击量: 6

前端IE8浏览器兼容提醒代码

代码来自百度爱采购

<!--[if lte IE 8]>
	<style>
        * {
            margin:0;
            padding:0
        }
        body {
            font:14px/1.5 "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;
            background-color:#f2f2f2
        }
        .ie-header {
            height:88px;
            border-bottom:1px solid #eee;
            width:100%;
            background-color:#fff
        }
        .ie-header-inner {
            width:990px;
            margin:0 auto
        }
        .ie-logo {
            margin-top:24px
        }
        .ie-warning {
            padding:0 40px 10px 40px;
            text-align:center;
            font-size:32px
        }
        .ie-warning-sub {
            color:#666;
            text-align:center;
            margin-top:0;
            margin-bottom:40px
        }
        .ie-content {
            border-radius:4px;
            width:830px;
            margin:16px auto 40px;
            background-color:#fff;
            padding:40px 80px 80px 80px
        }
        .ie-content-browser {
            overflow:hidden
        }
        .ie-content-browser-item {
            width:33%;
            float:left;
            text-align:center;
            margin-top:20px
        }
        .ie-content-browser-item
                p {
            font-size:16px;
            color:#333
        }
        .ie-content-browser-item a {
            font-size:16px;
            border-radius:4px;
            color:#fff;
            display:inline-block;
            width:180px;
            height:40px;
            line-height:40px;
            background-color:#EF1F1F;
            margin-top:20px;
            text-decoration:none
        }
	</style>
	<div class="ie-header">
		<div class="ie-header-inner">
			<img class="ie-logo" height="40px" width="150px" src="/static/pc/files/logo/logo.png"/>
		</div>
	</div>
	<div class="ie-content">
		<h2 class="ie-warning">您使用的浏览器版本过低</h2>
		<p class="ie-warning-sub">当前浏览器可能存在安全风险,为了保障您的采购体验,请立即升级浏览器!</p>
		<div class="ie-content-browser">
			<div class="ie-content-browser-item">
				<img class="chrome" height="110px" width="110px" src="/static/pc/files/ie/chrome.png"/>
				<p>Chrome 浏览器</p>
				<a target="_blank" href="https://www.google.cn/chrome">下载</a>
			</div>
			<div class="ie-content-browser-item">
				<img class="chrome" height="110px" width="110px" src="/static/pc/files/ie/edge.png"/>
				<p>微软 Edge 浏览器</p>
				<a target="_blank" href="https://www.microsoft.com/zh-cn/edge">下载</a>
			</div>
			<div class="ie-content-browser-item">
				<img class="chrome" height="110px" width="110px" src="/static/pc/files/ie/ff.png"/>
				<p>火狐浏览器</p>
				<a target="_blank" href="http://www.firefox.com.cn/download/">下载</a>
			</div>
		</div>
	</div>
<![endif]-->

 

评论已关闭!