那会儿,大概是零几年的时候,互联网还没现在这么花哨,网站普遍也比较简单,不像现在各种特效、动画跟不要钱似的往上堆。我那时刚从学校出来没多久,也没啥大项目经验,就想着接点小活儿练练手,想着能多接触点实际的东西,学点本事。正我一发小,家里开个小饭馆,说想整个网站,赶时髦,能在网上放个菜单、电话啥的,方便客人查。我一听,这不正好吗?立马答应了下来,心里想着,这小活儿,手到擒来。
本站为89游戏官网游戏攻略分站,89游戏每日更新热门游戏,下载请前往主站地址:www.gm89.icu
我吭哧吭哧弄了一个星期,终于把网站的初版页面给码了出来。当时我在自己电脑上,用的是IE8(那会儿IE8都算新的了),还有Firefox浏览器,来回看,来回调试,那叫一个漂亮,布局规整,图片清晰,字体也舒服。自己左看右看都觉得完美,心里美滋滋的,感觉这活儿肯定能拿高分,发小也该给我多加几个菜了。
结果,我兴冲冲地拿着笔记本,跑去我发小店里,想给他展示一下我的“杰作”。他那电脑,老旧得不行,还用着XP系统,装的浏览器,就是那大名鼎鼎的Internet Explorer 6。鼠标一点开,我当场就傻眼了。天呐,这啥玩意儿?我的那个“漂亮”网站,在IE6里,简直就是一锅稀饭!图片跑飞了,文字堆在一起,按钮不知道去哪儿了,背景颜色也没了,排版更是乱七八糟,惨不忍睹。发小看着我那张逐渐扭曲的脸,表情也有点不对劲了。
我当时就想,是不是我文件没传对?赶紧又当着他的面重传了好几遍,但页面打开,还是老样子。是不是他这电脑浏览器坏了?可他店里就这么一台能上网的电脑,也没法换个浏览器试试。那一刻,我真是脸都绿了,冷汗直冒,恨不得找个地缝钻进去。我嘴上还强撑着说“,可能网速有点慢,回去我再看看!”心里直打鼓,这可咋整?
晚上回家,我赶紧开电脑,找了好久,弄了个IE6的虚拟机,把网站一扔进去,一测试,果然!不是我眼花,也不是发小电脑坏了,是这IE6它就这么显示!这下可把我急坏了,发小还等着看效果,说好几天后要给客人展示的,这要是到时候还这鸟样,我这招牌可就砸了。
我开始在网上到处搜,翻论坛,加QQ群,逮着人就问“Internet Explorer 6兼容性差,网页显示不正常怎么办?”一开始根本听不懂那些人说的什么“盒模型”、“hasLayout”,还有“浮动”、“双倍边距”、“PNG透明度”……那些技术名词,对我来说简直就是天书。但没办法,活儿接了总得干我只好硬着头皮,一个词一个词地查,一个问题一个问题地试。
- 是条件注释。这玩意儿简直是救命稻草!它能让我的网站专门给IE6提供一套不一样的CSS样式。我学着用它,在网页的头部写上特殊的代码,比如只让IE6加载一个叫做“*”的文件。这样,我就可以把所有只针对IE6的修正都写到这个文件里,不影响其他浏览器。
- 然后是浮动清除。IE6这货,内容稍微一多,元素一用浮动,就容易乱七八糟,下面的东西会莫名其妙地跑到浮动元素的旁边去,甚至把整个布局都给毁了。我学会了用 `overflow: hidden` 来让父元素自己把浮动元素“抱住”,或者在浮动元素后面加一个专门的 `div`,给它设置 `clear: both` 来把浮动清理掉。
- 还有那个PNG透明图片问题。现代浏览器用PNG图片做透明背景都好好的,但在IE6里,一用PNG透明就变成灰蒙蒙一块,像打了层脏东西。我只能在网上找了个专门的JS脚本,虽然加载起来有点慢,但总算能让PNG图片在IE6里正常透明了,虽然有点麻烦,但总比没有
- 盒模型和 `hasLayout` ,这两个东西真是折磨人。IE6对盒模型的理解跟标准不一样,导致很多宽度高度的计算都出错。后来我发现,很多时候,给那些在IE6里表现奇怪的元素,加上一个 `zoom: 1` 的样式(虽然这是IE的私有属性),就能奇迹般地解决一些莫名其妙的问题,比如元素的宽度高度不对,或者浮动失效了。虽然当时我也不知道原理是但就是管用,那会儿能解决问题就行。
- 双倍边距问题,就是当一个元素浮动起来,并且设置了 `margin` 的时候,在IE6里,它的 `margin` 会变成两倍。为了解决这个,我学会了把它设置成 `display: inline`,或者干脆 `margin` 只设置一边,或者把 `margin` 的值写成负数来抵消。
- 就是无奈的妥协。有的时候,实在调不我就只能改设计方案。比如,如果用PNG透明效果太麻烦,我干脆就换成背景色,或者用GIF图片代替。毕竟在那个时代,让IE6能看,比追求完美更重要。
那段时间,我几乎把所有能找到的IE6兼容性教程都啃了一遍。每天不是在写CSS,就是在改CSS,眼睛都快花了。头发也掉了不少,晚上睡觉做梦都是各种奇怪的布局bug。虽然不能说把网站弄得和现代浏览器一模一样,毕竟它是个老掉牙的浏览器,很多特性根本不支持。但至少在IE6上,网站也能看了,布局不乱,图片正常,文字也清楚了。发小一看,高兴坏了,直说我手艺还真给我多加了几个招牌菜。
现在回想起来,那时候的网站开发真是麻烦,一个IE6就能把人折腾得够呛。不像前端框架一把抓,浏览器兼容性好太多了,几乎不用操心这种问题。不过也正是那段经历,让我真正认识到了前端开发的复杂和细致,也让我养成了那种遇到问题就钻研进去的习惯。现在虽然不用再和IE6打交道了,但这份解决问题的劲头,一直都在。