下面小编给大家总结了几种给网站添加IE6升级提示代码的方法例子,希望本文章来给各位同学带来帮助。
IE6的是一款横跨十年的浏览器,作为一枚前端,对其已经失望透顶,但其在中国的市场比仍旧很高,中国大量的PC上安装的都是盗版Windows XP,而Windows XP上的预装浏览器就是IE6。
面对如今硬件加速和支持HTML5的浏览器来说,IE6无论在安全性和兼容性上简直就是一垃圾中的垃圾,而对搞UED和前端的设计师而言,更是如噩梦般的存在。但是我想,无论你是普通用户还是网站开发人员或者是国内的浏览器开发者,我们都应该采取一些措施,共同促进IE6的灭亡。
作为一枚前端开发人员争取放弃兼容IE6,如果可以请添加对IE6用户设置了升级的提示。以下是本站为网站添加IE6升级提示的方法,可以直接添加,当然我适用的是jQuery框架,如果需要原生的小改js一下就可以了。
最简单办法
代码如下 |
|
<!--[if IE 6]>
<script src="//letskillie6.googlecode.com/svn/trunk/2/zh_CN.js"></script>
<![endif]-->
|
利用jquery方法
html代码:
代码如下 |
|
<!--[if lte IE 6]>
<div id="ie6-warning"><p>本页面采用HTML5+CSS3,您正在使用 Internet Explorer 6,在本页面的显示效果可能有差异。建议您升级到 <a href="http://www.microsoft.com/china/windows/internet-explorer/" target="_blank">Internet Explorer 8</a> 或以下浏览器:
<a href="http://www.mozillaonline.com/">Firefox</a> / <a href="http://www.google.com/chrome/?hl=zh-CN">Chrome</a> / <a href="http://www.apple.com.cn/safari/">Safari</a> / <a href="http://www.operachina.com/">Opera</a></p></div>
<![endif]-->
css代码:
/*ie6提示*/
#ie6-warning{width:100%;position:absolute;top:0;left:0;background:#ffffe1;padding:5px 0;font-size:12px}
#ie6-warning p{width:960px;margin:0 auto;}
jQuery代码:
jQuery(function ($) {
if ( jQuery.browser.msie && ( jQuery.browser.version == "6.0" ) && !jQuery.support.style ){
jQuery('#ie6-warning').css({'top':jQuery(this).scrollTop()+'px'});
}
});
|
javascript的办法
以下代码加入要添加页面的底部,</body>之前即可,在IE6以上版本不显示。
代码如下 |
|
<!--IE6版本提示开始-->
<style type="text/css">
#ie6-warning{background:#FF0; position:absolute;top:0; left:0;font-size:12px; line-height:24px; color:#F00;
padding:0 10px;}
#ie6-warning img{float:right; cursor:pointer; margin-top:4px;}
#ie6-warning a{text-decoration:none;}
</style>
<!--[if lte IE 6]>
<div id="ie6-warning">
<img src="/img1/guanbi.jpg" width="14" height="14" onclick="closeme();" alt="关闭提示" />
您正在使用 Internet Explorer 6 低版本的IE浏览器。为更好的浏览本页,建议您将浏览器升级到
<a href="http://www.microsoft.com/china/windows/internet-explorer/ie8howto.aspx" target="_blank">IE8</a>
或以下浏览器:<a href="http://www.firefox.com.cn/download/">Firefox</a> / <a href="http://www.google.cn/chrome">
Chrome</a> / <a href="http://www.apple.com.cn/safari/">Safari</a> / <a href="http://www.Opera.com/">Opera</a>
</div>
<script type="text/javascript">
function closeme()
{
var div = document.getElementByIdx_x_x("ie6-warning");
div.style.display ="none";
}
function position_fixed(el, eltop, elleft){
// check if this is IE6
if(!window.XMLHttpRequest)
window.onscroll = function(){
el.style.top = (document.documentElement.scrollTop + eltop)+"px";
el.style.left = (document.documentElement.scrollLeft + elleft)+"px";
}
else el.style.position = "fixed";
}
position_fixed(document.getElementByIdx_x_x("ie6-warning"),0, 0);
</script>
<![endif]-->
<!--版本提示结束-->
|