这事儿得从前年说起。当时手头正好缺钱，老婆说得买个电动牙刷，我看了看预算，觉得还能努努力。结果接了个活儿，一个老国企内部的展示系统。甲方那个负责人是个五十多岁的老大哥，人挺但是技术上完全不懂。他合同里就加了一条死规定：
必须能在他们办公室内所有电脑上正常显示。
我寻思着，那没问题，Chrome、火狐，或者哪怕IE11总能用？
结果等我带着笔记本去现场调试的时候，我傻眼了。他们所有的办公终端都是十年前的配置，操作系统锁得死死的，根本没权限升级浏览器。一打开，屏幕上赫然写着：IE6。我当时真想把合同撕了。可为了那电动牙刷和生活费，我忍了。
从头开始，跟IE6的经典BUG死磕到底
拿到需求的第一天，我就开始在虚拟机里安装IE6。布局一跑，简直是一坨屎。我用的现代Flex布局或者简单的浮动，在IE6里直接就是一团乱麻，错位、重叠、边距翻倍，什么奇葩问题都冒出来了。
我当时就炸毛了，这跟重新写一套代码有什么区别？但没办法，钱还得赚。
第一招：处理最恶心的“双倍边距”问题。
这是用浮动（float）之后，IE6会给浮动元素的外边距（margin）翻倍。你设置了10px，它给你显示20px，整个布局就推开了。我试着用清除浮动，用overflow: hidden，统统不灵。
后来我想起以前看过的老旧技术帖，IE6的很多怪毛病，都是可以通过“激活HasLayout”来解决的。我没用啥高大上的方法，我直接暴力喂它一个zoom: 1;。这玩意儿在现代浏览器里没用，但在IE6里，它能激活这个元素的HasLayout属性，瞬间就治好了我的双倍边距。
第二招：应对臭名昭著的“三像素缝隙”。
用浮动并排几个元素时，IE6总是会在元素之间莫名其妙多出3个像素的空隙。你设置padding 0，margin 0，它还是有。这问题把我折磨得够呛。后来我发现，只要给父元素设置display: inline;或者干脆给父元素设置一个负值的外边距（比如margin-right: -3px;），就能把这个缝隙吞掉。我选了后者，虽然暴力，但是管用。
用土办法和条件注释隔离样式
我发现，如果把现代代码和IE6的代码混在一起，简直就是灾难。稍微动一下CSS，另一个浏览器就崩了。我决定不能让这些老旧的“土方法”污染我的主代码。
我的做法是，把所有针对IE6的特殊修正代码，全部放到一个单独的CSS文件里，然后用条件注释把它包裹起来。这样，只有IE6这台老机器在解析的时候，才会加载那堆丑陋的补丁代码，其他浏览器直接忽略。
我主要用了这几个土招，专治IE6：
- 下划线前缀：比如
_width: 200px;。IE6认识这个带下划线的属性，其他浏览器直接无视。我用它来修正IE6独特的“盒子模型”问题（IE6计算宽度时，是把边框和内边距算进总宽度里的，跟现代标准不一样）。 - 星号HACK：比如
padding-top: 10px;。虽然不如下划线那么干净，但也能用来对付IE6和部分老IE7。 - IE6专有CSS文件：单独写了个*，里面全部是
zoom: 1;和各种负值修正，用条件注释加载，完美实现隔离。
我前前后后花了大概一周的时间，不断调试虚拟机，把所有布局问题都抹平了。当我在那个老大哥的终端机上，看到网页完完整整、没有一丝错乱地显示出来时，我心里那个石头才算落了地。
我本以为这种兼容IE6的活儿早就进了历史博物馆，结果现实狠狠给我上了一课。虽然现在我再也不想接这种单子了，但那一周的摸爬滚打，确实把老旧浏览器的各种坑，算是彻底摸透了。
教训就是：不要相信合同里“能在所有电脑上正常显示”这句话，一定要问清楚，
“你说的所有电脑，到底是什么型号、什么浏览器？”
，不然等你去了现场，发现面对的是IE6，你哭都没地方哭去。我现在遇到这种要求，要么加钱，要么直接拒绝。电动牙刷虽然重要，但我的头发更重要。
