Banner Image
目录
首页 » 博客 » IE 5.5 兼容性审查

IE 5.5 兼容性审查

审查项目:HTML 4.01 · CSS2 · ECMAScript 3


为什么要做这个审查



这个网站的副标题写着"兼容 IE5.5+",sidebar 里也写了"可以正常在 Windows 95 上访问"。

标准是: HTML 4.01、CSS1+CSS2(部分支持)、ECMAScript 3(JScript 5.5)、W3C DOM Level 1。 也就是 IE 5.5 的实际能力边界。

审查代码我使用了DeepSeek V4,经过静态分析和人工复核,发现了以下问题

致命问题(7项)



  • rgba() 半透明背景
  • rgba() 出现在 header、banner、sidebar-left、404 页、以及 editor.py、search.py、stats.py 三个 CGI 脚本的生成样式中。全站所有页面的深色半透明背景都依赖 rgba(0, 0, 0, 0.45)

    IE5.5 遇到不认识的颜色值直接跳过,背景变成透明,整个网站的深色主题在 IE5.5 里就是一团浆糊。修复方法: IE 专有的 filter:progid:DXImageTransform.Microsoft.gradient ——这个 filter 虽然是为渐变设计的,但用同样的起止颜色可以实现不透明度的效果。 ARGB 格式里 #7300000073 就是 45% 不透明度。

    不过这项我并不打算修复,在老设备上背景变成透明并不是一件坏事,虽然不兼容rgba()属于致命错误。


  • flex 布局
  • 表情面板用了一个 <div style="display: flex; flex-wrap: wrap; gap: 1px"> 包裹 20 个表情图片。IE5.5上不能正确加载 flex,所有表情图会按默认块级排列堆成一列。

    统计页(stats.py)用了 display: flexgap: 18pxflex: 1min-widthmax-width,属于 CSS3。不过在 IE5.5 打开统计页除了IP地图有些大小错误,其他的倒是正常。
    修复方法:表情面板改回 <table> 布局,统计页暂时不考虑更改,仅缩小IP地图的尺寸应该能解决。


  • box-sizing: border-box
  • 侧边栏的留言板表单严重依赖 box-sizing: border-box 来控制输入框宽度。 IE5.5 无法识别这个属性,width: 100% 的 input 会因为 border 和 padding 撑破容器。需要手动把 border/padding 值从 width 里扣掉。


  • overflow-x / overflow-y
  • 留言板和更新日志的滚动容器用了 overflow-y: auto; overflow-x: hidden;。 IE5.5 只认 overflow 这个简写,虽然不支持 overflow-x/y,但看起来没什么错误。


  • toolbox.py 的 3 个 JS 问题
  • 工具箱的"复制密码"功能用了三个 IE5.5 不支持的 API:

    document.querySelector('.result-box span') Selectors API 是 DOM Level 2+ 的东西,IE5.5 只有 DOM Level 1。得改用 document.getElementsByTagName('span') 遍历,或者直接给目标元素加 ID。

    box.textContent textContent 是 DOM Level 3 的,IE5.5 用 innerText

    document.execCommand('copy') 虽然 execCommand 在 IE4 就有了,但 'copy' 命令直到 IE10 才支持。IE5.5 的剪贴板 API 是 window.clipboardData.setData('Text', ...)

    中等降级(6项)



  • placeholder 表单提示文字消失
  • 留言板表单的 Name、Email、留言内容三个字段,编辑器的标题和正文输入框,工具箱的七个输入框—— 全用了 HTML5 的 placeholder 属性。IE5.5上会静默忽略。 用户在空白的输入框里看不到任何提示文字。

    可以通过 JS polyfill 解决检测 'placeholder' in document.createElement('input'), 不支持就用 onfocus/onblur 事件手动模拟。不过考虑到 JS polyfill 本身也是开销, 在 90s 老机器上不划算,也可能考虑直接在输入框旁边加文字标签。


  • :hover 在非链接元素上
  • IE5.5 的 CSS 只支持 a:hover。而我用了 .em-toggle:hover (表情面板展开/折叠按钮)、input[type="submit"]:hover(发送按钮)、 .toolbar-btn:hover(编辑器工具栏按钮)。这些在 IE5.5 下全部无效。 不过这只是外观问题,不影响功能,可以接受。


  • word-break
  • toolbox.py 的密码生成结果和 stats.py 的 UA 字符串用了 word-break: break-all。 IE5.5 不识别这个属性,遇到超长的连续字符(比如 base64 编码输出)可能溢出盒子。 可以用 IE 专有的 word-wrap: break-word 替代。


  • box-shadow / linear-gradient
  • 留言板通知邮件的外框用了 box-shadow: 3px 3px 0px #a0a0a0, toolbox 标题栏用了 linear-gradient。前者在 IE5.5 下没有阴影(只是少点质感), 后者回退到纯色 #000080(效果还过得去)。这两项我个人倾向不修。


  • 编辑器预览用了 HTML5 doctype
  • 编辑器的"预览"功能生成的临时页面用了 <!DOCTYPE html>(HTML5 版)。 在 IE5.5 下会触发标准模式,渲染和老页面不一致。改用 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 即可。

    轻微问题(10项)



  • image-rendering: pixelated 20 个表情图和所有 badge 都写了这个属性。IE5.5 忽略它,图片按默认平滑渲染。不过对于不缩放的原始尺寸图片,IE5.5 本来就是最近邻采样,效果差不多。这项更多的是为了兼容现代浏览器的高清屏幕,IE5.5 上降级完全可以接受。

  • transition 表单提交按钮的悬停动画。IE5.5 下没有过渡效果,按钮直接变色,不影响使用。

  • outline: none 输入框去除焦点轮廓。IE5.5 对 outline 支持本身就有 bug,这个属性写不写区别不大。

  • resize: none 禁止 textarea 拖拽缩放。IE5.5 根本不支持 textarea resize,这个属性纯属多余。

  • crossorigin header 里两个 <link rel="preconnect" crossorigin>。IE5.5 不认识 preconnect 也不认识 crossorigin,静默跳过。本来也是性能优化用的,不影响功能。

  • loading="lazy" 表情图和外部 badge 都写了这个属性。IE5.5 会忽略它。这项和 image-rendering 一样,主要是为了性能优化和节省流量,在老设备上不加载 lazy 版本反而可能更快。

  • <audio> 标签 博文里嵌入的背景音乐用了 HTML5 <audio>。中文版有 <bgsound> 回退,英文版有 <embed> 回退,IE5.5 能正常播放。

  • hidden 属性 —— <embed hidden="true">。虽然 hidden 后来进了 HTML5 标准,但 IE 早在 HTML4 时代就给 embed 用了这个非标准属性,所以在 IE5.5 上反而能用。

  • :-webkit-autofill 伪类 —— 表单自动填充样式覆盖。IE5.5 的 CSS 解析器遇到不认识的伪类会丢弃整个规则块,不过这块本来就只有 WebKit 浏览器需要。

  • 缺少 type="text/css" / type="text/javascript" —— 部分 <style><script> 标签漏了 type 属性。HTML 4.01 规范要求写上,但 IE5.5 默认按 CSS/JS 解析,实际不影响运行。
  • 修复计划和优先级



    综合影响范围和修复难度,我的修优先级如下:

    优先 问题 原因
    1 rgba() → IE filter 影响所有页面背景,修完后视觉效果统一
    2 overflow-x/y → overflow 留言板和更新日志滚动失效,影响核心交互
    3 表情面板 flex → table IE5.5 下表情选择框大小错误
    4 toolbox.py JS 三处修复 复制密码功能报错
    5 box-sizing 移除 表单输入框宽度异常
    6 placeholder polyfill 降级问题,中等影响
    7 stats.py table 重写 工作量最大、使用频率最低
    8+ 其余 LOW 级问题 降级可接受,择机修复

    « 当前站点架构更新分析与下一步任务 « 返回主页
    工具
    English   [工具箱]

    最新文章

    » IE 5.5 兼容性审查
    » 当前站点架构更新分析...
    » 2026年5月 · ...
    » 哈基米观察日记
    » 脚本详解:build.ps1

    » 文章归档

    本文标签

    技术 兼容性 网站建设 复古

    DRAGONRSTER
    CC BY-NC-SA
    © 2004-2026 DragonRster • Made with HTML • 本站支持IE5.5+
    最佳浏览分辨率:1024x768 • 本页最后更新于 2026年05月04日 06:31:31