你有你的ie678，我有我的页面展现。你可以嘲笑我们的技术不去升级，我们会证明这是哪个浏览器的时代。前端，注定是踩坑的过程，但，那又怎样，哪怕所有人都用ie，也要坚持自己的方向。
在这个苦逼的浏览器国度里，既不能让所有人都用谷歌火狐，又不能强制别人升级浏览器，实属前端之痛。
判断浏览器低版本是，给予温馨的提示还是很不错的。
下面附上刚测试成功的代码，功能是判断浏览器是低版本（ie8及以下）时，顶部会给予提示，如下图
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端检测低版本浏览器并给予升级提示</title>
<style>
*{margin:0;padding:0;}
body{font-family: "Microsoft YaHei"}
a{
text-decoration: none;
color: #010101;
}
a:hover {text-decoration: none;color: #4e9bd5;}
#upgrade{
text-align:center;
position: fixed;
height: 30px;
top: 0;
width:100%;
background: #FDF2D3;
color: #333;
font-size:12px;
line-height:30px;
}
#close-upgrade{position: absolute;right:10px;top:0px;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<h3>这是正常内容</h3>
<h3>这是正常内容</h3>
<h3>这是正常内容</h3>
<h3>这是正常内容</h3>
<script>
$(function(){
// ie8及以下浏览器顶部会出现提示
if (!$.support.leadingWhitespace) {
$('body').append('<div id="upgrade">您的浏览器版本过低。为保证最佳学习体验，<a href="http://cdn.dmeng.net/upgrade-your-browser.html" target="_blank">请更新或更换高版本浏览器</a><a href="javascript:;" id="close-upgrade">以后再说 X </a></div>');
}
// 浏览器升级按钮
$('#close-upgrade').click(function(){
$('#upgrade').slideUp(200);
});
});
</script>
</body>
</html>
或者可以这样写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端检测低版本浏览器并给予升级提示</title>
<style>
*{margin:0;padding:0;}
body{font-family: "Microsoft YaHei"}
a{
text-decoration: none;
color: #010101;
}
a:hover {text-decoration: none;color: #4e9bd5;}
#upgrade{
text-align:center;
position: fixed;
height: 30px;
top: 0;
width:100%;
background: #FDF2D3;
color: #333;
font-size:12px;
line-height:30px;
}
#close-upgrade{position: absolute;right:10px;top:0px;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script>
$(function(){
// ie8及以下浏览器顶部会出现提示
if (!$.support.leadingWhitespace) {
$('body').append('<div id="upgrade">您的浏览器版本过低。为保证最佳学习体验，<a href="http://cdn.dmeng.net/upgrade-your-browser.html" target="_blank">请更新或更换高版本浏览器</a><a href="javascript:;" id="close-upgrade">以后再说 X </a></div>');
}
// 浏览器升级按钮
$('#close-upgrade').click(function(){
$('#upgrade').slideUp(200);
});
});
</script>
<![endif]-->
</head>
<body>
<h3>这是正常内容</h3>
<h3>这是正常内容</h3>
<h3>这是正常内容</h3>
<h3>这是正常内容</h3>
</body>
</html>
最简单粗暴的方法，直接跳转到浏览器升级页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端检测低版本浏览器并给予升级提示</title>
<!--[if lt IE 8]>
<script>
window.location.href='http://cdn.dmeng.net/upgrade-your-browser.html?referrer='+location.href;
</script>
<![endif]-->
</head>
<body>
<h3>这是正常内容</h3>
<h3>这是正常内容</h3>
<h3>这是正常内容</h3>
<h3>这是正常内容</h3>
</body>
</html>
2021-06-15 18:58