踩 IE

对最近论坛上普遍反映的赢政论坛上O9简繁转换问题有感

在阅读本文前，需要各位对网站和浏览器的兼容性问题的历史原因有一个最基本的了解，请点击下面的地址阅读
https://secure.wikimedia.org/wikipedia/zh/wiki/浏览器大战

现状：由于众所周知的原因，在我国，IE/WIN是桌面PC市场最大的占有者，比IE/WIN的世界平均占有率还要高很多，很多用户包括网站开发者，在他们的概念里“浏览器=IE”，当然现在要稍微好点，起码开发者不知道Fx的已经是少数了（O仍旧不乐观，认知度都很低更别提占有率了）。

如果把网站比作CD，IE、Fx、O等不同核心的浏览器比作不同品牌的CD唱机就不难理解一个道理，之所以不同品牌不同制造工艺的CD唱机都能播放同一张CD是因为CD本身有它的工业制造标准，包括外形尺寸、文件存储格式等等。在我们的生活中，小到一颗螺丝钉，大到电脑配件都有它的工业制造标准。同理，如果想要所有的网页浏览器都能正常显示同一张网页，那么这张网页必须也要遵守网页技术标准，公有的网页技术标准由W3C组织（www.w3.org）制定和发布，所有的浏览器包括IE在内对网页标准都有支持，问题是IE在原有标准的基础上又添加了一些额外的东西，以CSS为例，IE处理CSS的方式是非常古怪的，很多地方与公有标准可以说是背道而驰，同样的问题还存在于IE私有的JScript vs ECMAscript以及ActiveX vs Java Applet等等。IE支持两者，但又与作为公有标准的后者有区别。当网页开发者有意无意使用了IE私有标准，并且只使用IE调试网页，那么差异的存在是理所当然的。我们不可能指望微软完全公开这些差异的技术细节，因为这些差异本身就是微软的一项战略——培养用户和开发者对IE的依赖性，不让他们轻易转投其他浏览器，如果你放弃IE，那么你必须面对非标准网站给你带来的麻烦。从商业角度讲，微软这么做无可厚非，但其对整个WEB行业的通用和兼容性造成的巨大的障碍是显而易见的。最终受损的永远是用户，在不知不觉中失去了浏览器和操作系统的选择权，当没有条件使用IE/WIN的时候你就面临无法正常获得互联网信息的风险。互联网本来是一个通用的信息交互平台，一个网页，应该是不止IE，也不止Fx和O等桌面浏览器能够访问，手机、读屏器、PDA等其他平台的设备都至少应该能正确获取它所提供的信息，通用的网页标准是解决这个问题的唯一&最佳方案。遗憾的是国内落后的技术和意识并不重视网页标准，如果真要抱怨，应该抱怨那些不称职的网页开发者而不是浏览器开发者。作为最终用户和开发者，理应支持开放统一的标准，多个标准的存在是巨大的资源浪费。用户必须使用多个浏览器以兼容不同网站，开发者必须在多个浏览器内调试网页以达到跨浏览器兼容性。题外话，联想到前些日子蓝光和HD-DVD标准之争，最终受损的是谁？2个新标准阵营肯定会推出各自独立的媒体，某版本的电影可能只有HD-DVD或蓝光版，用户必须购买造价更昂贵的与2者相容的驱动器才能保证相容性，DVD生产商为了不流失用户也要分别购入不同的生产线...

也许有人认为这种问题解决很简单，“我们应该学会变通，在兼容网页标准的同时再和IE那些非标准特性相容不就结了？”但问题真的这么简单？没人了解这些差异的根本——微软的“标准”并不是公开公有的标准，网页上显示的差异只是表象，不知道浏览器底层的代码和运行机制，那就不可能做到完全一样。非IE核心浏览器开发者只能去“猜测”IE的行为，一点一点去“靠近”它，其结果就是已有的一些问题解决的同时又有新问题出现。大家真的认为O9那个“著名”的简繁问题是BUG？对，O8没有这个问题，但你有没有想过O9同时兼容了O8以前不能兼容的网站？真相是赢政论坛的简繁转换脚本并没有在兼容性上下很大功夫，它基本上只考虑了IE核心浏览器，虽然做过非IE核心浏览器的判断处理，但显然也是成效甚微，Fx不能运行这个脚本就是证据。O9改善了脚本运行机制，解决了部分O8的兼容问题，同时又带来了新的问题，that's all。

也许又有人会说我只是普通用户，我不关心技术问题，我只关心使用结果。对，这么想无可厚非，本文的目的并不是要各位去停止反映这些兼容问题，只是普及一些知识，端正各位面对这种问题的态度，请不要轻言BUG这个词，作为开发者最讨厌的就是不是BUG的东西被人称做BUG。O支持网页标准没有错，O也从来没有停止过改善非标准兼容性的工作。本着从根本上解决问题的态度，最好的解决问题的途径应该是：向非标准网站的管理者汇报这些问题，让他们去改善，而不是Opera。Firefox曾经举办过类似活动，我认为还是很有意义的。

相关链接：
论坛讨论
对Internet_Explorer的批评

主要是AntiIE，并不是给firefox打广告:D

http://my.opera.com/tifa/albums/show.dml?id=71033

有时候，我们用CSS创建一个高度自适应布局，如何保证页脚（footer）在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事。我看过一些利用绝对定位的例子，但总感觉不是那么完美，经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法，兼容IE5.0+，Opera 8.5+，Firefox 1.5+。下面我们看步骤：

1 为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值，同时清除所有元素的 margin 和 padding。顺便提一下，经过我的测试，html 和 body 的 height: 100%; 等于整个浏览器窗口的总高度，无论内容是否超过一屏。而它们下一级子元素 height: 100%; 则等于第一屏的高度。如何，是不是有点不好理解？

* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}

2 因为上面提到的问题，所以为了让布局自适应高度，我们要加上 min-height: 100%;，虽然IE不支持这个属性但是IE的 height: 100%; 有同样的作用：

#wrapper {
min-height: 100%;
}
* html #wrapper {
height: 100%;
}

这样，一个最简单的最小高度满一屏的自适应布局就做好了。为了便于查看，我加了一些宽度和背景色修饰，如下：

* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
text-align: center;
font: 12px/1.4 Verdana, sans-serif;
background: #f00;
}
#wrapper {
width: 770px;
min-height: 100%;
background: #ccc;
margin: auto;
text-align: left;
}
* html #wrapper {
height: 100%;
}

查看例一

3 加上页头页脚和内容部分，为了让 footer 在最下方，我们当然要把 footer“请出”wrapper 之外。当然，这样高度就超过一屏了，别急，后面有解决办法。

#header {
background: Green;
height: 40px;
}
#sidebar {
float: left;
width: 200px;
background: Gray;
}
#content-box {
float: right;
width: 570px;
background: Olive;
}
#footer {
height: 50px;
background: Background;
width:770px;
margin: auto;
}

查看例二

4 为了让 footer 能够刚好在最下方，我们可以给 footer 加一个等于自身高度的上方的负边距强制把它向上推一个自身的高度，即 margin-top: -50px; 。但是这样的话当内容超过一屏我们会看到内容会盖在 footer 的上方，显然这是失败的。所以我们还要给 content-box 和 sidebar 加一个父级元素，设定它的下方内补丁等于 footer 的高度，强制把 content-box 和 sidebar 向上推一个 footer 的高度。同时，因为 content-box 和 sidebar 是浮动元素，所以我们还要让它 闭合浮动元素 。 这样就比较完美了。

#out-content {
padding-bottom: 50px;
}
#out-content:after {
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}
* html #out-content {
height: 1%;
}
#footer {
height: 50px;
background: Background;
margin: -50px auto 0;
}

查看例三，宽度固定布局

5 举一反三，利用上面的原理我们还可以做一个一边固定宽度一边自适应宽度的液态弹性布局，修改一些宽度然后给 #content-box 下面再套一层就可以实现了。

查看例四，液态弹性布局

其他问题，如果有人希望中间两栏高度相同的话可以使用图片欺骗法，见 创建各栏同高的多栏布局。

OK，经过以上方法，这个布局应该是比较完美了。

感谢：
Shark 的 利用负值的外补丁创建液态布局
一叶千鸟 的 自适应高度布局
SolarDreamStudios 的 footerStick
The Man in Blue 的 footerStickAlt

应该说，这也是中国第一届网页标准主题聚会。

流程：

• happydesigner 的 lukhnos 简单介绍了他们这个组织以及推广web标准的计划和心得。
• 阿捷上台作演讲，我们的现状、所遇到的困难、将来的发展规划等等，翻译网站重构的背景，建一个WEB标准人才库，还提议可以定期来类似的聚会，结果大家一致响应。
• 大家自由踊跃发言，电子工业出版社的冰冰表示将来还会出类似的书，期待啊。最后大家分成了小组讨论。直到各自散去。

参加聚会的不只有WEB标准的爱好者，还包括了一些从事UE和产品人员，通过交流，大家遇到的问题基本都是差不多的。WEB标准现阶段还是比较理想化的东西，从构建到实施需要付出很大的代价，其中

• 学习的成本，用阿捷的话说，一个勤奋好学的设计师至少需要一个月时间来适应这种新模式。
• 推广的成本，如何说服公司的领导层支持标准？光有水平和口才恐怕还不够，如果老板只认前期效率和成本那你就死心吧。
• 沟通的成本，你不能指望公司所有参与项目的人都懂标准，为了代码的尽善尽美和合理规划，你需要和设计师以及程序员做很多的沟通工作。

目前来讲，还没有一个科学且适用范围较广的模式供参考，大家都在实践中摸索。现在，技术已经不是问题，如何推广这个理念才是首先要面对的问题。

其实，这样的聚会真应该多办办，通过聚会大家相互交流学习，增强信心和知识面，如果能引起业内一些大人物的注意就更好了，无论如何，老板们不重视和支持我们，那我们永没有出头之日。

ETC：

• 很荣幸能见到阿捷并和他交流，真人和网上一样和蔼可亲，下次一定带着我那本《网站重构》找他签名。
• 有的人发言声音不大，以后可以考虑准备一个话筒。
• 电子工业出版社的冰冰很漂亮。
• 这次算是bokee的主场，又见到了不少老同事。怀念怀念~