以下是 jquery判断浏览器版本过低代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="IE=7.0000" http-equiv="X-UA-Compatible">
<title>jquery判断浏览器版本过低代码</title>
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<link rel=stylesheet href="css/promotion_index.css">
<script src="js/js_jquery-1.11.1.min.js"></script>
</head>
<body>
<div style="display: none" id=browser_ie>
<div class=brower_info>
<div class=notice_info>
<p>你的浏览器版本过低，可能导致网站不能正常访问！<br>为了你能正常使用网站功能，请使用这些浏览器。</p>
</div>
<div class=browser_list>
<span>
<a href="#/" target=_blank>
<img src="images/chrome.png"><br>chrome
</a>
</span>
<span>
<a href="#/" target=_blank>
<img src="images/firefox.png"><br>firefox
</a>
</span>
<span>
<a href="#" target=_blank>
<img src="images/safari.png"><br>safari
</a>
</span>
<span>
<a href="#"
target=_blank>
<img src="images/ie.png"><br>ie9及以上
</a>
</span>
</div>
</div>
</div>
<div class=header>
<div class="header-inner wrap">
<a class=header-logo href=" ">融云</a>
<div class=header-account>
<a class=btn-signin href=" ">登录</a>
<a class=btn-signup href=" ">注册</a>
</div>
<ul class=header-nav>
<li><a href=" ">首页</a></li>
<li><a href=" ">功能</a></li>
<li><a href=" ">案例</a></li>
<li><a href=" ">价格</a></li>
<li><a href=" ">知识库</a></li>
<li><a href=" ">文档</a></li>
<li><a href=" ">下载</a></li>
</ul>
</div>
</div>
<script>
if (!$.support.leadingWhitespace) {
$("#browser_ie").show();
}
</script>
</body>
</html>CSS代码(promotion_index.css):
*{margin:0;padding:0;list-style:none;}
body{background:#fff;font:normal 12px/22px 宋体;}
img{border:0;}
a{text-decoration:none;color:#333;}
a:hover{color:#1974A1;}
BODY{MIN-WIDTH:1280px;OVERFLOW-X:auto;FONT-FAMILY:"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;COLOR:#495d64}
A{COLOR:#495d64;CURSOR:pointer;TEXT-DECORATION:none}
.header{BORDER-BOTTOM:#e7e8ea 1px solid;BORDER-LEFT:#e7e8ea 1px;BORDER-TOP:#e7e8ea 1px solid;BORDER-RIGHT:#e7e8ea 1px}
.header .header-inner{PADDING-LEFT:32px;WIDTH:1180px;HEIGHT:87px;FONT-SIZE:14px}
.wrap{MARGIN:0px auto;WIDTH:1280px}
.header-logo{TEXT-INDENT:-9999px;WIDTH:280px;BACKGROUND:url(../images/logo_1.png) no-repeat 0px 16px;FLOAT:left;HEIGHT:80px}
.header-account{PADDING-BOTTOM:0px;PADDING-LEFT:0px;PADDING-RIGHT:13px;FLOAT:right;MARGIN-LEFT:23px;PADDING-TOP:27px}
.header-account A{BORDER-BOTTOM:#1f8dd6 1px solid;TEXT-ALIGN:center;BORDER-LEFT:#1f8dd6 1px solid;LINE-HEIGHT:31px;WIDTH:68px;DISPLAY:inline-block;BORDER-TOP:#1f8dd6 1px solid;CURSOR:pointer;MARGIN-RIGHT:11px;BORDER-RIGHT:#1f8dd6 1px solid;border-radius:4px}
.header-inner .btn-signin{COLOR:#1f8dd6}
.header-inner .btn-signup{BACKGROUND-COLOR:#1f8dd6;COLOR:#fff}
.header-nav{FLOAT:right;FONT-SIZE:18px}
.header-nav LI{POSITION:relative;MARGIN:0px;FLOAT:left;BORDER-TOP:#fff 3px solid}
.header-nav LI A{TEXT-ALIGN:center;PADDING-BOTTOM:5px;LINE-HEIGHT:78px;PADDING-LEFT:25px;OUTLINE-WIDTH:0px;PADDING-RIGHT:25px;DISPLAY:block;VERTICAL-ALIGN:middle;PADDING-TOP:0px}
.header-nav LI.selected{BORDER-TOP:#1f8dd6 3px solid}
.header .head-user{PADDING-LEFT:7px;PADDING-RIGHT:13px;FLOAT:right}
.header .head-user LI{LINE-HEIGHT:78px;FLOAT:left;COLOR:#1f8dd6;MARGIN-RIGHT:11px}
.header .head-user A{LINE-HEIGHT:87px;DISPLAY:inline-block;HEIGHT:87px;COLOR:#1f8dd6;MARGIN-LEFT:5px}
.header .head-user A.btn-signin{TEXT-ALIGN:center;LINE-HEIGHT:31px;BACKGROUND-COLOR:#1f8dd6;WIDTH:67px;HEIGHT:31px;COLOR:#fff;MARGIN-LEFT:20px;VERTICAL-ALIGN:-2px;border-radius:4px;_margin-top:28px}
#browser_ie{BACKGROUND-COLOR:#f6f6b4;DISPLAY:none;HEIGHT:85px;COLOR:#000;FONT-SIZE:15px}
#browser_ie .brower_info{MARGIN:0px auto;WIDTH:800px;PADDING-TOP:17px}
#browser_ie .brower_info .notice_info{POSITION:relative;MARGIN-TOP:5px;FLOAT:left}
#browser_ie .brower_info .notice_info P{TEXT-ALIGN:left;LINE-HEIGHT:25px;WIDTH:360px;DISPLAY:inline-block}
#browser_ie .browser_list{POSITION:relative;FLOAT:left}
#browser_ie .browser_list IMG{WIDTH:40px;HEIGHT:40px}
#browser_ie .browser_list SPAN{TEXT-ALIGN:center;WIDTH:80px;DISPLAY:inline-block}
分享到QQ
分享到微博
微信扫一扫
