2008年的前端开发,没有什么复杂的框架,没有什么响应式布局,只有一件事:跟IE6死磕。
IE6是什么?它是微软在2001年发布的浏览器,到2008年已经七岁了——在互联网行业,七岁意味着上古时代,相当于现在的“出土文物”。但IE6在国内市场的占有率高达80%以上,因为XP系统太普及了,而XP自带IE6,客户们清一色用IE6,我们只能被迫适配。
IE6是一个神奇的浏览器,它不支持圆角,不支持透明度,不支持PNG透明通道,不支持CSS的min-width,不支持:hover用在非链接元素上,更不遵循任何盒模型规范。但它最神奇的地方在于:它有自己的想法,你写的CSS,它会用自己的方式去理解,主打一个“我不要你觉得,我要我觉得”。
你明明写的是“margin-left: 10px”,它觉得应该是20px;你写“float: left”,它觉得应该再加一个“_float: left”才行;你写了一个很漂亮的布局,在Firefox里完美呈现,在IE6里一打开,直接碎成一地,导航栏跑到页面底部,侧边栏消失不见,图片全变成大大的红叉,文字叠在一起,读都读不出来。
前端工程师有一句口头禅:“IE6去死吧!”但这句咒语从来没有生效过,因为IE6就像一只打不死的小强,永远活在你的代码里,折磨着每一个前端人。
我们公司的前端是一个叫小高的姑娘,二十出头,扎着高马尾,看起来文文静静的,说话轻声细语,但只要一提到IE6,她就会瞬间变身“暴躁战士”,眼里冒火。
有一天,小高花了四个小时,写好了一个页面的CSS,在Firefox里测了,完美;在IE7里测了,还行;在IE6里一打开,她瞬间沉默了——整个页面就像被轰炸过一样,惨不忍睹。
小高盯着屏幕看了三十秒,深吸一口气,又深吸一口气,努力平复心情。她把IE6关掉,重新打开,还是一样;她又重启了电脑,再打开,依旧是“车祸现场”。
她终于忍不住了,开始改代码。她加了一个条件注释,专门为IE6写了一份单独的样式表,里面全是以“_”开头的CSS属性——这是IE6特有的hack,其他浏览器会忽略,只有IE6会认,相当于“专门哄着IE6干活”。
她写了大概两个小时,IE6里的页面终于能看了——虽然不是完全和设计图一样,但至少导航栏回到了它该在的位置,侧边栏也出现了,图片也能正常显示了。
小高站起来,活动了一下脖子,发出一连串“咔咔”的声音,然后咬牙切齿地说:“我恨IE6,这辈子都不想再碰它!”
张同学在旁边看热闹,接了一句:“IE6也恨你,不然怎么故意跟你作对。”
小高瞬间炸了,抓起桌上的U盘就朝张同学扔过去。张同学反应快,赶紧躲开,U盘“啪”的一声砸在墙上,弹到地上,摔成了两半。
重点是,U盘里有张同学正在写的代码,而且他没备份——那是他写了一个星期的成果,全在里面。
办公室里瞬间安静了三秒钟,然后张同学发出了一声惊天动地的惨叫,那个分贝数,大概能和服务器风扇一较高下,连钱总都从厕所改的会议室里探出头来。
小高也慌了,连忙说:“对不起对不起,我不是故意的,我太生气了。”
张同学蹲在地上,把U盘的碎片捡起来,试图拼回去,当然拼不回去。他抬起头,眼眶通红,声音哽咽:“我的代码……我一个星期的代码啊……”
钱总走过来,看了看地上的U盘碎片,又看了看哭丧着脸的张同学,沉默了一会儿,说:“下次记得备份。”说完,他转身走回会议室,关上了门,留下我们一群人在原地尴尬。
那天下午,张同学没有写代码。他坐在工位上,把U盘的碎片用胶带粘好,摆在显示器前面,像供了一个牌位,还在旁边贴了一张纸条,上面写着:“2008年8月15日,我的代码死于IE6之手,享年7天。”
后来公司买了新U盘,每人一个。钱总在发U盘的时候,特意强调:“这个U盘是公司财产,谁再扔谁赔,而且要赔双倍!”
小高在底下小声嘀咕:“那我不扔了,我改用键盘砸。”
钱总没听见,但张同学听见了。第二天,张同学就从二手市场淘了一个IBM Model M键盘——那款键盘是机械的,外壳是钢板做的,重量大概有两公斤,砸人能砸晕的那种。
小高看到那个键盘,嘴角抽了抽:“你至于吗?”
张同学抱着键盘,一脸认真:“至于,防患于未然。”