焦秋野 | 关注网站设计,前端资讯,用户体验,SEO,网站设计 » IE6

IE6已被微软宣判死刑,但谁能为它送葬?

admin — Tue, 30 Mar 2010 00:08:41 +0000

:hover在IE6下的问题

admin — Mon, 29 Mar 2010 00:21:16 +0000

在处理css的机制上，IE总是有很多让人吐血的举动，但对于他们现在的改进力度还是值得高兴的。

就拿对伪类:hover的支持来说，IE7+终于添加了对a以外其它标签的支持。对于这样的改进，当然是要拍手称快的，但在IE6下，:hover就连对a的支持都不是那么的尽如人意。下面就是我想简单说的一个关于:hover在IE6及更早浏览器下的问题。

很多人可能都已经知道了:hover在IE6及更早浏览器（以下称IE6-）下的一些问题。我主要是想说一下形如a:hover span{}这样的问题。

有的时候为了增加一些简单的动态效果，常常会借助:hover的帮忙，比如我们时常会令鼠标经过链接时改变文字的颜色。如：

a:hover{color:#F00;}

鼠标经过时改变我的颜色

是的，这将在所有的浏览器中都有效。但如果换成这样：

a:hover em{color:#F00;}

鼠标经过时改变我的颜色

你会发现在IE6-下什么都没有发生，我们的样式失效了。对，就是这样，应该很多人都碰到过且已经解决了这个问题。

是的，只需要再添加一个a:hover{}样式就可以解决这个问题了，里面可以是zoom, padding, margin等属性。如下：

a:hover{zoom:1;}
a:hover em{color:#F00;}

鼠标经过时改变我的颜色

看着恢复了正常的效果，去想可能是因为什么造成:hover失效的。你可以使用zoom, display, padding等等属性来搞定，于是想会不会是因为haslayout。恩，很有可能就是这样。但你接着测试，会发现，不论你在a:hover{}写入任何属性，color啊，font-size啊，overflow啊（甚至是不存在的属性，如xx:yyy），都可以使之恢复正常。

测试到这里是不是有点目瞪口呆的感觉？对，我也是这样的。至于原因是什么，我还不知道，或许有人知道。

一个a:hover的简单例子

例子虽然简单，但即刻你又会发现其实中英菜单和一些css tips效果也是那么的简单。

原文

IE6 必死

admin — Sat, 27 Feb 2010 23:04:25 +0000

最近 Twitter 上很多人在推一个名为 IE6 Must Die 的活动, 参与的朋友可以通过头像转换服务在自己的头像上加上一个禁止 IE6 的图标, 很是拉风.

Internet Explorer 6 是曾经浏览器的霸主, 击垮 Netscape 并最终占据 95% 的浏览器市场. 但如今已经功能性能落后, 还需要特殊照顾, 被称为阻碍网络技术向前发展的障碍.

为了推动 IE6 的灭亡, NeoEase 即日起, 会为 IE6 用户进行更新提示, 提示信息会显示在页面的右下方, 每星期一次. 效果如右图所示.

IE6 为何不死?

IE6 久久不离其位当然是有原因的, 根据网上资料与个人总结, 得出以下几点:

1. 普及时间长, 用户已经形成了使用习惯, 甚至形成以偏概全的认知. XP 的成功和长寿让 IE6 成为大家最熟悉的软件之一, 而且 2001 到现在正是网络发展最快速的几年, 很多用户一直只适用 IE6, 他们找不到 Internet Options 菜单项, 无法理解其他浏览器新奇的标签和工具, 甚至认为 IE6 就是网络.

2. 在 IE6 盛行几年间, 很多公司为了节约成本, 开发的应用系统只支持 IE6. 令人称奇的是现在还有很多企业继续生产这样的产品. 系统都做出来了, 现在去兼容吧, 不好意思, 合同没写, 加钱也未必做得到. 推倒重做吧, 不可能! 行, 那公司的所有电脑都必须使用 IE6.

3. 如果你有留意浏览器的市场占有率, 你会发现 IE 各版本的占有率和 Windows 的占有率成正比, 也就是说, 使用 Windows 系统的用户大部分都没有升级或者更换操作系统默认浏览器. Vista 的失败令 Windows XP 和 IE6 有更多的生存空间.

4. 还有一些顽固分子, 可能看着其他浏览器不顺眼或者觉得用旧东西比较酷 (我的某个朋友就经常吹捧他对 Windows 95 的熟悉).

5. 网页设计师和开发工程师, 他们是最大的受害者, 是最想摆脱 IE6 但又不能甩手放弃的.

IE6 为何该死?

IE6 是网页开发人员的噩梦. 他们必须花很多时间和精力去照顾这个老家伙, 所以这帮人很想整死 IE6. 从开发的角度来看, IE6 很该死的.

1. PNG 是一种支持半透明通道的图片, 可以方便的用于设计网页, 制作叠层和其他复杂的页面效果, 但是 IE6 不支持. 用滤镜强行应付会导致浏览器占用超高资源, 并且得不到预想效果.

2. IE6 有自己一套标准的 CSS 样式, 必须写更多的代码去照顾它. (个人认为 IE7 在这方面比 IE6 更糟糕)

3. JavaScript 与 W3C 出入巨大, 连 DOM (Document Object Model) 都不一致, 调用资源的代码也与 W3C 有很大的出入, 程序员被迫在本来就很松散和复杂的 JS 代码上追加很多判断语句.

4. IE6 对于页面控件的处理与众不同, 令人很头痛. 如: select element 的优先度很高会遮挡页面上 DIV 块, 必须 hack. radio 按钮和 checkbox 按钮的样式也无法定义, 很难统一页面风格.

另外, IE6 的安全性, 性能, 功能明显地已经满足不了现在的网络需求. 过两年, 能不能用来上 “饭否” 都难说. 更换浏览器是大势所趋.

加速 IE6 的灭亡

HTML5 筹备已久, Windows 7 呼之欲出, 这是一个消灭 IE6 的好机会. 很多网站纷纷向用户发送更新提示, 希望用户可以升级或者更换浏览器. 还有些网站已经完全不支持 IE6, 要求其访客更换浏览器.

前几天看到一篇文章, 题目好像是 “前端开发人员能支持 IE6 比较牛, 还是拒绝支持 IE6 的比较牛?” 前者认为用户需要尊重, 后者认为兼容是延缓 IE6 灭亡的主要原因. 不管你如何认为, 哪个更牛并无关要, 重要的是尽己所能把 IE6 推下悬崖.

什么?! 你还用 IE6? 换了吧! 我已经将本站使用的提示框做成了一个 Widget, 你可以简单地在上添加以下代码将它添加到你的网页上.

中文版：

更多语言：http://www.neoease.com/lets-kill-ie6/

10个修正IE6的bug的技巧

admin — Mon, 15 Feb 2010 05:18:11 +0000

我们知道，IE6可能过不了多久就会消失了，但是我们还能继续支持这个浏览器并且避免hack和有约束的CSS吗？这里是10个使用有效的HTML和CSS代码来修正IE6主要问题的方法。
1. 使用DOCTYPE
你应该在一直每个HTML文件的头部都使用DOCTYPE，并且我们推荐使用strict 版本，比如：

或者，对于XHTML使用:

2. 设置position: relative
将一个元素设置为”position:relative”可以解决很多问题，特别是你曾经遇到隐藏的或对齐诡异的盒子。显然，你需要非常小心点儿，因为绝对定位的子节点可能会因此重新定位。

3. 将浮动元素设置为display:inline
具有margin属性的浮动元素可能引起著名的IE6双倍margin问题，比如，你为一个元素指定margin-left为5px，但是IE6中实际上却表现为10px。”display:inline”将解决这个问题，尽管这不是必须的，你的CSS仍然是有效的。

4. 将一个元素设置为hasLayout
很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。这是一个IE内部属性（IE隐藏的，更多关于haslayout的资料，可以参阅这里），用来确定相对于其他元素，内容是如何布局和定位的。如果你需要设置一个inline元素(比如一个链接)为block元素，或者是应用透明效果，设置hasLayout也可能是必须的。

最简单的设置hasLayout的方法是为CSS设置一个高度或宽度（zoom也可以用，但是zoom并不是CSS标准的一部分）。我们推荐设置实际尺寸，但是问题是这是不现实的，你可能需要使用”height:1%”。如果父元素并没有设置高度，该元素的实际高度并不受影响，而且这个时候hasLayout已经被启用。

5. 修正重复文字bug
复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法，有些是完美的，但是做一些反复试验也是必须的：

确保所有的元素使用”display:inline;”
在最后一个元素上使用一个”margin-right:-3px;”
为浮动元素的最后一个条目使用一个条件注释，比如：
Put your commentary in here…

在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)
访问 positioniseverything.net 查看该问题的完整介绍。

6. 在可点击和悬停的元素上只使用标签
IE6只认识对a标签的CSS hover效果。

你也可以在基于JavaScript的组件内使用他们来控制，以使他们保持键盘的可操作性。是有一些可替代的选择，但是标签比其它方案更可靠。

7. 使用!important 或高级选择器来区分IE6
不使用传统Hack或在额外文件中的条件CSS的方法，写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义：

#element
{
min-height: 20em;
height: auto !important; /* 所有浏览器都理解这段代码 */
height: 20em; /* IE6 错误的使用这个值 /*
}

IE6 不理解min-height并错误的用20em覆盖”auto”高度，但是，如果内容需要更多的空间的话，它会自动增加高度。

另外一个可选的方法是使用高级选择器，比如e.g.
#element {
min-height: 20em;
height: 20em;
}

/* IE6 无视下面的代码*/
#element[id] {
height: auto;
}

8. 避免百分比单位
百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小，才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比，比如：
body {
margin: 2% 0 !important;
margin: 20px 0; /* IE6 only */
}

9. 尽早测试并不断测试
不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕，而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行，那么一般在其它浏览器就不会有问题。

10. 重构你的代码
经常发生的事情是，修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码，但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。
原文：http://www.qianduan.net/?p=6190
译自：www.sitepoint.com