我也凑热闹,拒绝IE6

闲来没事,凑凑热闹

拒绝IE6是很老的活动了,很久以前我也在页面上放过一个js,会从右下角弹出一个提示,提示请升级或更换浏览器,但是由于JS压缩会导致失效,页面有时也有点变形

偶不是设计师,对CSS之类的东西只懂得用firebug看看哪里宽带是多少,边距是多少,改改这些,其他一窍不通

不过IE6这东西的确恶心,公司某些系统在非IE6下运行都会出错,也真TM恶心

因此看到新的代码,不是用js弹出的,貌似看着效果还不错,又加上了

废话了一堆,下面是正式的代码了,关闭提示还是用js的

把代码放到body最开始地方,显示在页面顶部就行,当然你想放在顶部你就自己改到footer里

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--[if lt IE 7]>
<div style="border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;">
<div style="position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;">[![Close this notice](http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg)](#)</div>
<div style="width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;">
<div style="width: 75px; float: left;">![Warning!](http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg)</div>
<div style="width: 275px; float: left; font-family: Arial, sans-serif;">
<div style="font-size: 14px; font-weight: bold; margin-top: 12px;">您正在使用一款非常落后的浏览器!!!</div>
<div style="font-size: 12px; margin-top: 6px; line-height: 12px;">为了给您带来更好的浏览体验,请点击右侧图标,选择一款你喜欢的浏览器。</div>
</div>
<div style="width: 75px; float: left;">[![Firefox](http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg)](http://www.firefox.com)</div>
<div style="width: 75px; float: left;">[![Internet Explorer 8](http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg)](http://www.browserforthebetter.com/download.html)</div>
<div style="width: 73px; float: left;">[![Safari](http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg)](http://www.apple.com/safari/download/)</div>
<div style="float: left;">[![Google Chrome](http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg)](http://www.google.com/chrome)</div>
</div>
</div>
< ![endif]-->

建议不要放到wrapper里,这样可能不能全屏,这个也不算全屏,就是一横幅

效果如下

原始的代码提示语是英文的,我稍微改了下,你也可以自己修改,另外原始代码里所有链接都是单引号的,YUI压缩后就不对了,我全部改为双引号就OK,偶不懂这些,反正显示正常不出错就OK

原始出处在这里,http://www.ie6nomore.com/code-samples.html

大家一起来拒绝IE6吧,让这浏览器早点去死

声明: 除非注明,小峰网络遨游记文章均为原创,转载请以链接形式标明本文地址

本博客原创文字只代表本人某一时间内的观点或结论,与本人所在公司没有任何关系。

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。

第三方若用于商业用途的转载,须取得本人授权。

本文作者:

本文地址:http://xfeng.me/make-merry-refuse-ie6/

你可能还对下面文章感兴趣: