IE6

告别垂死的IE6与IE7

昨天我度过了自己难忘的25岁的生日,对于我而言,今年非比寻常。而对于浏览器世界也是如此——这个月我看了数份浏览器报告,欣慰地看到了Chrome的高歌猛进,Firefox的老当益壮,IE9的势如破竹,当然最最欣慰的,莫过于看到IE6/7的垂死挣扎,恍惚间幻觉三足鼎立之势已成。不过转念一看国内的情形却又让人沮丧,各种壳浏览器横行,前端革新之路仍相当遥远漫长。 在国外,究竟IE6/7被淘汰到何种地步呢?不足5%,甚至更低。看了今早smashingmagazine的关于兼容过时浏览器额外收费的统计,超过50%的开发者表示将额外收取费用,更有约1/3的开发者表示不提供兼容旧浏览器的服务,默认提供兼容的比例不足1/10——无论是IE6还是IE7,这些过时的古怪的浏览器实际上真的已经是奄奄一息。 如果时常阅读各种国外的技术类文章,…

IE Alpha Filter Bug: #02050a色值像素透明化

IE的透明滤镜bug算的上是IE为数众多bug里的不起眼的角色,直到之前我确实的遇到了它,我想我根本不会去关注非标准的IE滤镜带来的各种问题。这个bug的表现非常的直观,filter透明度渐变后,图片的某些点变成了透明的了!比如如果这个时候背景是白的,就是白色的噪点。这在banner切换时表现的非常明显——渐变是产生噪点,渐变完成后噪点也会一直残留: 这个Bug在IE6 7 8里都存在,实际上只要使用了透明滤镜就会表现出来,并且非常有趣的是,它只对一种颜色值有反应:#02050a 为什么是这个颜色?恐怕只有微软才知道。一开始我只是以为只有一些偏黑色的图片会出现这样的情况,但后来经过一系列测试我才发现原来出现的噪点如此固定以至于所有噪点所在的像素点原来的色值都是#02050a,决然不是巧合。然后,如果google这个"#02050a",就能找到关于它的各种文章了,可以说这个色值就是这个bug的关键字。 原因是IE6…

博客放弃兼容IE6以及IE7

就在几天前,WordPress宣布在最近一次的更新里不在支持IE6,这一举措加速了IE6的死亡。虽然我的博客早已经在顶部挂起公告,希望IE6和IE7的用户能升级他们的浏览器,但其实仍然安分地继续做着尽可能的IE6兼容。不过这次真的打算放弃了,既然连wordpress都宣布了不支持IE6,维护者也不应该拘泥下去,尽管我的wp版本始终是2.9.3... IE6是伟大的,2001年8月发布,到现在10年时间,寿命之长恐怕真的是要空前绝后了。虽然web开发者对IE6深恶痛绝,但同时却也不能忘记IE6给开发者带来的价值——它曾经一度提高了web开发的门槛,虽然幅度有限。所以前端对IE6的感情是复杂的,失去了眼中钉的同时,也失去了一个挑战的舞台——IE6总能给我们惊喜,不管那惊喜是不是我们想要的——当然通常不是。 国内的IE6仍然是大多数,虽然系统升迁win7导致IE8也不少,但若要国内的网站放弃IE6远远还不够——甚至我自己的系统里就是IE6。…

IE6相关资料归档

虽然微弱,但IE6确实正在慢慢地死去。针对IE6的知识同样渐渐过时。不过这也是因为自己整天做的是针对国外的网站,这种感觉才越发强烈。 本文会在2011年内持续更新(23 December 2013: IE6已死,有事烧纸...)。我会把我知道的各种零碎的关于IE6的东西整理出来。这些东西都将会随着IE6消亡,慢慢淡出前端工作者的视线,但是它们存在过,并且我列举的都是陪着我一路走过来的资料,我从这些地方学到了很多。 今后的一年里我要穷举出自己经历的IE6,一个我眼中的IE6。同时,往前看,一个新的IE6正在前方等着我们:) IE6 Bugs 参考资料 从2008/3/10开始停止维护的IE6 bug列表 -…

word-wrap导致的li额外间隙

有些问题可能很少有机会遇到,前段时间我就在工作中遇到一个由word-wrap引起的兼容问题。因为当 word-wrap:break-word 这种 rule被加到了全局CSS里后,出现问题就显得非常隐蔽,所以排查了不少时间才找到原因。不过这也不算大问题,因为造成这种情况是多种因素的巧合。如下图: 造成这种莫名其妙间隙的原因就是对li应用了word-wrap的结果。但是单单应用word-wrap还不足以使IE6和IE7出现反常,另一个必要条件就是没有对li指定宽度。如果每个单元都是由图像的高宽撑大的而没有设置宽度,这样再加上word-wrap就出现了上面那张图中的情况。 既然反复测试中知道了原因那么解决方法也就显而易见了。解决方法有3个: 对li应用word-wrap:normal; 限定li元素的高宽; 对图片的万精油display:block; 随后闲话说说word-wrap,一个微软的私有属性,但现在也已经被CSS3标准吸纳。虽然这是一个非常实用的属性,但是在某些特定情况下,对旧浏览器仍然还是会造成一些影响的。…

新的wordpress主题

自从尝试做了swordis主题之后,对wordpress的主题也有所认识。于是决定做一个自己的主题。并且这次和上次不同,是很认真地要做完的。名字还没有想好,但是目标很明确: 没有图片的纯CSS主题。意味着线条和空间是首要设计元素。 必须过XHTML1.1以及CSS3验证。CSS3阴影和变换等,由于有前缀,所以即使使用也会暂时注释掉。 通过主题单元测试( Theme Unit Test )。这是一组严酷的内容兼容性检测。 流体布局。右边栏,因为我调查下来,比起侧边栏在左面,似乎更多人习惯在右面。 弹性em值。 兼容所有主流浏览器,包括IE6在内。 这些天从睁开眼睛开始我就在思考怎么把这个新的主题写好。主要考虑的是线条和颜色,实际上和篆刻类似,…

浏览器模式

关于浏览器模式,一直以来的理解是这样的:浏览器厂商出于那些老站点的向后兼容的目的,创建了两种模式。即标准模式(standards mode)和怪异模式(quirks mode)。在标准模式里,浏览器按照规范渲染页面,而在怪异模式里,浏览器以一种老式的或者是模拟老式浏览器的渲染方式表现页面。 这些并没有错,但是还不够全面和深入。当我回顾《CSS Mastery》的时候,也让我想起了很多渐渐淡忘的、并且也可能是无关紧要的其他碎片。 比如,两种模式最大的差异的例子就是IE盒模型的解释。IE如此,Opera 7也是如此。再比如,Mozilla和Safari的第三种“准标准模式(…

跨浏览器边框探索

虽然起了一个看似很牛逼的题目,但本文可以说完全是蛋疼的人的一种消遣~通常开发人员都有自己的放松方式。写文章用不了太久,倒是图材准备了老半天。谨以此文,让我们来消遣下各个浏览器对于边框的理解方式。 参与此次测试的浏览器包括windows下的几乎全部:ie6,ie7,ie8,ie9preview,chrome,firefox,safari,opera,seamonkey。各版本皆为网上下载的最新版。并且由于这次的测试里,IE678的表现一致,firefox和seamonkey又是裙带,所以合并作IE8和firefox。下图就是这次浏览器的截图: 上面的这种排列顺序是故意的。下面的测试里就会显示出其原因,截图也都是按照这个顺序排列的。 首先看下面这张图,六种浏览器里显示了一个20X20的DIV,其边框为top:2px,…

10个糟糕的IE Bug及其修复

国外有很多优秀的文章可以用来学习,我决定花些时间翻译。我并不知道这篇文章有没有人翻译过,原文名 10 Awful IE Bugs and Fixes,我希望能有更多人能看到这些优秀的文章。外国人很幽默,所以我也就全文翻了。 这里很多都很常见,但这不妨碍文章的好坏。 ----------以下为译文---------- 我列举了10个常见的IE bug和解决方法。我相信这将能够帮助你减少调试IE布局不一致时花掉的时间。 作者:kevin 简介 在处理IE方面每个人都有他们自己的故事。作为一个开发者我不得不面对大量的IE的古里古怪的问题并且有的时候你只是想用头撞墙。但是随着时间的推移,我们慢慢吃一堑长一智(有些时候那不是我们的错,是IE的错!)并且开始接受和理解IE的怪异行为。我们不得不这样因为仍然有数量可观的IE6用户。…

HTML5 新标签 ruby

HTML5也许真的离我们不是很遥远。今天匆匆浏览了一下3月10日版本的关于HTML5和HTML4区别的W3C的草案: http://dev.w3.org/html5/html4-differences/#changed-elements ,就更加觉得仿佛就在眼前一般。在新标签里看到了ruby的名字突然就联想到了ruby语言。虽然这个ruby和ROR没什么关系,但引起了我想要去了解的兴趣。 ruby元素是用来标记称之为 ruby 注释的。ruby 注释是用ruby字符标示在汉字等东亚字符的上方或者右方用来标示的拼音的那部分。就像小时候读课文时,标记在文字上的拼音,就是ruby字符,或者称之为ruby(rubi)。 尽管ruby是HTML5的新元素,但W3C里有关ruby的定义不仅限于草案。这里面已经有ruby注释的推荐标准,甚至有ruby的CSS3组件定义的工作草案。而在HTML5的ruby元素的定义里,可以看到关于这个标签的说明 The…