踩 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的批评

不知我用这个词是否合适，刚刚试用了Google的Picaca2和Google Deaktop，结果是Picaca2的功能和支持页面右侧的工具栏跑到了下方，IE和Firefox没有这个问题...
而当我安装完Google Deaktop后却在帮助页面看到了如下文字：

Google 桌面是否可以与 Opera 一起使用？

Google 桌面与 Opera 浏览器部分兼容。如果把 Opera 作为默认浏览器，Google 桌面就会在 Opera 中打开。您可以看到 Google 主页上有一个"桌面"链接，使用这个链接指向的 Google 桌面，您可以查找文件、音乐、聊天记录以及在 Microsoft Internet Explorer 或 Mozilla Firefox 中查看过的 Web 历史记录等等。

不过，在 Opera 中查看的网页不会添加到 Google 桌面的索引中，因此用 Google 桌面是找不到这些网页的。由于不完全支持 Opera，所以我们同样不能保证所有其他的功能都可正常工作。

我们了解到，很多用户喜欢用 Opera 作为他们的浏览器，我们会考虑在 Google 桌面的将来版本中加大对 Opera 的支持。

然后我毫不犹豫地卸载了Google Deaktop。

对了，Google最近推出的Google Page Creator也不兼容Opera，而它却完全兼容Firefox。Gmail在Opera也有一些小问题，看来少数群体就是弱势，连完全为用户考虑的Google都不甩啊...

先贴出地址备份，有时间再总结一下吧

http://my.opera.com/community/forums/topic.dml?id=110572

http://my.opera.com/community/forums/topic.dml?id=110938

http://dev.codelphi.com/virushuo/archive/2004/08/27/20311.aspx

本文的完成，需要感谢adex的帮助。

用firefox去看asp.net做的网站，一般是很不爽的。所有的内容都像被风吹晕了一样往左边斜。就像这样：

IE里面则是这样的：

以前我并没有在意过这个问题，总觉得是作页面的时候做得不好。（关于页面的知识我很bc，就算在意估计也不会有什么结果）。今天，同事Adex发现了这个 现象的原因--asp.net的服务器控件在不同的浏览器中render出来的结果是不一样的。在firefox和ie中分别是这样的：

firefox:

<table id="panLogin" cellpadding="0" cellspacing="0" border="0" width="100%">

ie:

<div id="panLogin">

这下清楚了，本来好好的div,在firefox中变成了table。怪不得无论如何都往左偏。

用Reflector反编译system.web.dll的代码，在HtmlTextWriter类中可看到如下代码：

protected virtual HtmlTextWriterTag GetTagKey(string tagName)
{
if ((tagName != null) && (tagName.Length > 0))
{
object obj1 = HtmlTextWriter._tagKeyLookupTable[tagName.ToLower(CultureInfo.InvariantCulture)];
if (obj1 != null)
{
return ((HtmlTextWriterTag) obj1);
}
}
return HtmlTextWriterTag.Unknown;
}

这段代码在其子类Html32TextWriter中被重载为

protected override string GetTagName(HtmlTextWriterTag tagKey)
{
if (tagKey == HtmlTextWriterTag.Div)
{
return "table";
}
return base.GetTagName(tagKey);
}

明显，div被替换成了table。

为什么如此呢？请看这两篇文章

http://aspnet.4guysfromrolla.com/articles/050504-1.aspx

http://slingfive.com/pages/code/browserCaps/

比较长，我就不翻译了。

简单的说，就是在machine.config里面的<browserCaps>节点，定义了一些判断useragent的表达式。其中对ie的判断是这样的：

<case match="^Mozilla[^(]*\(compatible; MSIE <snip>">
browser=IE
...
tagwriter=System.Web.UI.HtmlTextWriter
</case>

而对mozilla5/firefox呢？是这样的：

<case match="^Mozilla/5\.0 \([^)]*\) (Gecko/[-\d]+ )?Netscape6/(?'version'(?'major'\d+)(?'minor'\.\d+)(?'letters'\w*)).*">

首先，这段正则表达式错了，firefox和mozilla5的useragent都没有包含Netscape6。然后，这段代码也没有让他们使用 HtmlTextWriter。也就是说，mozilla5/firefox只能得到html3.2的代码。

解决的方法很简单，用这个老外写的代码就可以，不仅解决了firefox的问题，好像还能解决mac机上的问题，不过我没测试mac。代码如下：

<!-- 2003-12-03, Rob Eberhardt - http://slingfive.com/demos/browserCaps/ -->
<browserCaps>
<!-- GECKO Based Browsers (Netscape 6+, Mozilla/Firebird, ...) //-->
<case match="^Mozilla/5\.0 \([^)]*\) (Gecko/[-\d]+)? (?'type'[^/\d]*)([\d]*)/(?'version'(?'major'\d+)(?'minor'\.\d+)(?'letters'\w*)).*">
browser=Gecko
type=${type}
frames=true
tables=true
cookies=true
javascript=true
javaapplets=true
ecmascriptversion=1.5
w3cdomversion=1.0
css1=true
css2=true
xml=true
tagwriter=System.Web.UI.HtmlTextWriter
<case match="rv:(?'version'(?'major'\d+)(?'minor'\.\d+)(?'letters'\w*))">
version=${version}
majorversion=${major}
minorversion=${minor}
<case match="^b" with="${letters}">
beta=true
</case>
</case>
</case>

<!-- AppleWebKit Based Browsers (Safari...) //-->
<case match="AppleWebKit/(?'version'(?'major'\d)(?'minor'\d+)(?'letters'\w*))">
browser=AppleWebKit
version=${version}
majorversion=${major}
minorversion=0.${minor}
frames=true
tables=true
cookies=true
javascript=true
javaapplets=true
ecmascriptversion=1.5
w3cdomversion=1.0
css1=true
css2=true
xml=true
tagwriter=System.Web.UI.HtmlTextWriter
<case match="AppleWebKit/(?'version'(?'major'\d)(?'minor'\d+)(?'letters'\w*))( \(KHTML, like Gecko\) )?(?'type'[^/\d]*)/.*$">
type=${type}
</case>
</case>
<!-- Konqueror //-->
<case match = "Konqueror/(?'version'(?'major'\d+)(?'minor'\.\d+)(?'letters'));\w*(?'platform'[^\)]*)">
browser=Konqueror
version=${version}
majorversion=${major}
minorversion=${minor}
platform=${platform}
type=Konqueror
frames=true
tables=true
cookies=true
javascript=true
javaapplets=true
ecmascriptversion=1.5
w3cdomversion=1.0
css1=true
css2=true
xml=true
tagwriter=System.Web.UI.HtmlTextWriter
</case>
</browserCaps>


为了避免在每台机器上配置的麻烦，可以在项目的web.config中加入这段代码。试试看，是不是table变成div了？

题外话：这个错误有点弱智，我不太相信ms能犯这样的错误，其实我更倾向于相信这是故意的。要么就是他们真的认为除了IE,别的浏览器都不能正确的支持html4.0。殊不知，支持最差得反而是IE。

英文网站提到这个问题的很多，但中文的竟然一个没有。这是一件可怕的事情，可见中国的.net程序员眼中只有IE，没有其他浏览器。这是何等悲哀的事情。