随着 Web 技术的进步和发展标准的演变，部分浏览器已逐渐落后。这些浏览器不仅缺乏对新技术和文件类型的支持，也无法提供最佳的用户体验，使电子商务企业陷入两难：如何在保障主流用户体验的同时，不让使用旧版浏览器的客户掉队？
在本期《Web Design Tips》（《Practical eCommerce》常规栏目）中，我们将探讨以下两点：
- 旧版及不兼容浏览器带来的具体问题；
- 管理浏览器兼容性问题的两种方法（重点针对微软 Internet Explorer 旧版本）。
视频：解决 IE6 浏览器问题的两种方法
不合规与过时浏览器的问题
尽管市面上有 Mozilla Firefox、Google Chrome、Maxthon、Opera 9.6 或 Safari 等多种浏览器可供选择，且约 44% 的用户仍在使用微软 Internet Explorer (IE)，但如此多的选项给网站设计与开发带来了挑战。不同浏览器对网站的渲染方式各异，且在 JavaScript 管理、服务器调用及图像处理上的差异，使得跨浏览器适配变得复杂。
虽然 Firefox、Opera 和 Chrome 能自动更新，但部分用户仍在使用 IE6 等旧版浏览器。此外，并非所有浏览器都符合 W3C（万维网联盟）标准。例如，微软曾长期忽略多项 W3C 标准，导致其浏览器兼容性较差；即便 CSS3 工作组提出了大量建议，也鲜有浏览器完全支持即将成为标准的 CSS3。
这些问题显著增加了个体经营者或电商 DIY 爱好者的建站难度。
应用 80/20 法则
解决兼容性问题的第一步是应用帕累托原则（80/20 法则）：在线商店 80% 的业务通常来自 20% 的潜在客户。因此，应聚焦主流浏览器，避免为极少数使用冷门浏览器（如 Konqueror）的用户耗费过多精力。
根据 W3schools.com 2009年1月的统计数据：
- Firefox 占比 45.5%，是最受欢迎的单一浏览器；
- Internet Explorer 7 (IE7) 占比 25.7%；
- Internet Explorer 6 (IE6) 占比 18.5%。
若针对 Firefox、IE7 和 IE6 进行设计，即可覆盖 89.7% 的互联网用户。同时，由于 Firefox 兼容性极佳，为其设计的页面通常也能在 Google Chrome（3.9%）和 Opera（2.3%）中获得良好渲染效果。
Firefox 容易适配，IE7 仍有瑕疵
遵循 W3C 标准即可轻松适配 Firefox。而 IE7 虽缺少部分 W3C 兼容性，但问题相对可控，主要存在以下已知 Bug：
- Peekaboo Bug：由 IE7 盒模型管理方式引起的浮动错误；
- Border Chaos Bug：连续盒子的负边距导致边框排列混乱；
- Double Float Margin Bug：IE7 对浮动元素的边距计算加倍。
IE6 的渲染噩梦
自 2001 年发布以来，IE6 一直是渲染难题的重灾区。其最大痛点在于无法正确渲染 .png 文件的 Alpha 透明度。.png 格式本能为网页提供最佳的透明效果，且在处理 Adobe Photoshop 或 Illustrator 导出的图片时，文件体积往往优于 .jpg 或 .gif，但在 IE6 中，透明或半透明的 .png 文件会完全失效。
修复方案一：使用 JavaScript 检测并引导升级
第一种策略是利用 JavaScript 识别访客浏览器版本，并礼貌提示升级。以下代码可将 IE5 和 IE6 用户重定向至升级提示页：
<script type="text/javascript"> function detectBrowser() { if (/MSIE (d+.d+);/.test(navigator.userAgent)){ //test for MSIE x.x; var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number if (ieversion>=8) else if (ieversion>=7) else if (ieversion>=6) window.open('http://siteurl.com/ie6.html','mywindow','width=920,height=700','scrollbar=yes') else if (ieversion>=5) window.open('http://siteurl.com/ie5.html','mywindow','width=920,height=700','scrollbar=yes') } } </script>
该脚本对 IE7 及以上版本无效；若检测到 IE5 或 IE6，则会弹出新窗口说明浏览器过旧，并提供获取新版 IE 或 Firefox 的链接。
修复方案二：使用仅针对 IE 的条件注释
第二种方法是利用条件注释加载专属 CSS 样式表。此功能仅在 IE 中生效，其他浏览器会自动忽略，非常适合针对 IE 进行差异化修复。
通用代码示例如下：
<!--[if gte IE 5]> <link rel="stylesheet" type="text/css" href="iespecific.css" /> <![endif]-->
上述代码中的 <!--[if gte IE 5]> 用于识别 IE5 及以上版本，并加载专用样式表。若仅需针对 IE6，可使用：
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="iespecific.css" /> <![endif]-->
通过指向独立 CSS 文件，我们可选择设计两套页面（一套符合 W3C 标准，一套兼容 IE），或使用针对性 CSS 显示隐藏的升级提示元素。
总结
老旧且不合规的浏览器虽带来挑战，但通过聚焦主流浏览器并采用上述两种应对策略，可使兼容性设计变得更加可控。
参考资料
- Jennifer Sullivan Cassidy：Internet Explorer 7 中的 CSS 标准合规性
- Internet Explorer 7 与 CSS 2.1 兼容性
- W3Schools 浏览器统计数据
- Christopher Heng：如何为不同浏览器使用不同的 CSS 样式表以及如何向旧版浏览器隐藏 CSS 代码