首页 » 页面 » IE5.5 不兼容功能清单与技术栈 [切换主题] [English]

IE5.5 不兼容功能清单与技术栈

技术栈

缘起

网站副标题写着"兼容 IE5.5+"，但实际情况是：有相当一部分功能在 IE5.5 上要么退化、要么直接不可用。这篇文章把不兼容的地方全部列出来，同时记录一下整个站的技术栈，方便后来者参考。

CSS 不兼容项

半透明背景 rgba()

站点所有暗色半透明背景都依赖 rgba(0, 0, 0, 0.45)，包括 header、banner、sidebar、404 页面，以及 editor.py、search.py、stats.py 三个 CGI 脚本生成的样式。

IE5.5 遇到不认识的色值直接跳过，背景变成全透明。理论上可以用 IE 私有的 filter:progid:DXImageTransform.Microsoft.gradient 模拟（ARGB 格式 #73000000 即 45% 不透明度）。

position: sticky

侧边栏粘性定位是 CSS3 特性。IE5.5 完全不支持，position: fixed 也要到 IE7 才有。退化行为：侧栏跟随页面正常滚动，滚出屏幕即消失。尝试用 JScript 的 onscroll 模拟过，但在 Pentium MMX 级别硬件上会导致明显的拖尾和卡顿。

display: flex 和 gap

表情面板使用 display: flex; flex-wrap: wrap; gap: 1px 来排列 20 个 20x20 像素表情图标。IE5.5 下 flex 无法解析，所有 <img> 回退为默认 display: block，表情纵向堆叠成一列。

stats.py 也用了 display: flex、gap: 18px、flex: 1、min-width、max-width，全部是 CSS3。

box-sizing: border-box

侧边栏留言表单的输入框依赖 box-sizing: border-box 来控制 width: 100% 的实际渲染宽度。IE5.5 不认识这个属性，width: 100% 会额外叠加 border 和 padding 导致溢出。理论上可以手动从宽度里减去 padding 和 border 的 px 值来修复。

overflow-x / overflow-y

留言板和更新日志的滚动容器用了 overflow-y: auto; overflow-x: hidden;。IE5.5 只认 overflow 简写，不认分轴写法。好在实际测试中未见明显渲染错误。

:hover 在非 <a> 元素上

IE5.5 的 CSS 只支持 a:hover。以下伪类全部无效：

  • .em-toggle:hover（表情面板展开按钮）
  • input[type="submit"]:hover（发送按钮）
  • .toolbar-btn:hover（编辑器工具栏）

纯视觉效果，不影响功能。

transition

表单提交按钮的 hover 过渡动画。IE5.5 无视 transition，按钮颜色瞬间切换，无动画。

word-break: break-all

toolbox.py 的密码生成结果和 stats.py 的 UA 字符串使用了 word-break: break-all。IE5.5 不认这个属性，超长连续字符串（如 base64 输出）可能撑破容器。可以用 word-wrap: break-word（IE 私有属性）替代。

box-shadow / linear-gradient

邮件通知模板用了 box-shadow: 3px 3px 0px #a0a0a0（模拟 3D 边框），工具箱标题栏用了 linear-gradient。前者在 IE5.5 下无阴影，后者回退到纯色 #000080。两个我都不打算修。

image-rendering: pixelated

全部表情图标和徽章图片都用了这个 CSS3 属性。IE5.5 忽略它，用默认平滑渲染。但对于未缩放的原始尺寸图片，IE5.5 本来就使用最近邻采样，实际效果差不多。这个属性主要是为现代浏览器高 DPI 屏幕准备的。

outline: none / resize: none

去掉输入框聚焦轮廓（outline: none）和禁止 textarea 拖拽缩放（resize: none）。IE5.5 的 outline 本身就有 bug，有没有这个属性差别不大。textarea 缩放 IE5.5 根本不支持，所以 resize: none 纯属多余。

HTML 不兼容项

placeholder 属性

留言板、编辑器、工具箱共计约 20 个输入框使用了 HTML5 的 placeholder 属性。IE5.5 静默忽略，用户在空输入框中看不到提示文字。

可以用 JScript polyfill 模拟：检测 'placeholder' in document.createElement('input')，不支持时用 onfocus/onblur 手动设置/清除默认值。但 polyfill 本身就是开销，在 90 年代硬件上得不偿失。替代方案是在输入框旁放文字标签。

<audio> 标签

博客文章的背景音乐嵌入使用 HTML5 <audio> 标签。中文版有 <bgsound> 回退，英文版有 <embed> 回退，所以 IE5.5 可以正常播放。

loading="lazy"

所有表情图片和外部徽章都加了 loading="lazy"（HTML5 属性）。IE5.5 忽略它，所有图片同步加载。在老设备上不加载懒加载版本可能反而更快。

<!DOCTYPE html>（编辑器预览）

编辑器"预览"功能生成的临时页面使用 HTML5 版 doctype。在 IE5.5 中这会触发标准模式，导致渲染与正式页面不一致。改成 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 即可。

crossorigin / <link rel="preconnect">

header 中有两行 <link rel="preconnect" crossorigin> 标签。IE5.5 不认识 preconnect 也不认识 crossorigin，静默跳过。这些是性能优化，不影响功能。

hidden 属性

<embed hidden="true"> 用于隐藏音频元素。虽然 hidden 后来进了 HTML5 标准，但 IE 从 HTML4 时代就在 <embed> 上使用这个非标准属性，所以 IE5.5 上实际可用。

缺少 type="text/css" / type="text/javascript"

部分 <style> 和 <script> 标签缺少 type 属性。HTML 4.01 要求写，但 IE5.5 默认按 CSS/JS 解析，实际无影响。

JavaScript 不兼容项

document.querySelector()

toolbox.py 的"复制密码"功能使用了 document.querySelector('.result-box span')。Selectors API 是 DOM Level 2+ 特性，IE5.5 只有 DOM Level 1。需要改成 document.getElementsByTagName('span') 加遍历，或者直接给目标元素加 ID。

element.textContent

同一段代码使用了 box.textContent，这是 DOM Level 3。IE5.5 的等价属性是 innerText。

document.execCommand('copy')

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

:-webkit-autofill 伪类

表单自动填充样式覆盖。IE5.5 的 CSS 解析器遇到不识别的伪类会丢弃整个规则块，但这本来就只对 WebKit 浏览器有用。

技术栈总览

构建系统
组件技术说明
页面构建PowerShell 5.1build.ps1 核心构建器，模板引擎 + 占位符注入
全站重建PowerShellrebuild-all.ps1，增量缓存 + 顺序编排
归档生成PowerShellgenerate-archive.ps1，扫描元数据 + 分组输出
RSS / SitemapPowerShellgenerate-rss.ps1 / generate-sitemap.ps1
Markdown 转换Python 3 + 正则md2html.py，自行实现，无第三方依赖
Web 服务器
组件技术说明
HTTP 服务Python 3 http.server 派生web_server.py，1.5K 行
路由白名单前缀 + 精确路径CGI 子进程调用，无框架
并发ThreadingMixIn多线程，请求队列 128
日志自定义 logging 模块按类别分文件，旧日志 gzip
CGI 脚本
脚本功能存储
guestbook.py留言板提交 + @通知data/runtime/guestbook.txt（pipe 分隔）
comments.py文章评论（楼中楼）data/comments/{slug}.txt
search.py免 JS 全文搜索data/search_index.txt
editor.pyWeb 端文章编辑器直接写 src/content/blog/
toolbox.py编码/哈希/密码等工具无状态
stats.py访问统计 + 可视化data/logs/access/
counter.py访客计数器 GIFdata/runtime/visitor_count.txt
邮件系统
组件技术说明
发送脚本Python smtplibmailer.py，子进程异步调用
SMTPQQ Foxmail端口 465 SSL
模板HTML 表格 + 3D 边框90s 复古风格邮件
前端
层面标准说明
HTML4.01 Transitional表格布局，<font> 标签
CSSCSS1 + CSS2（部分）+ CSS3 退化无框架
JSECMAScript 3 / JScript 5.5仅表单增强，核心功能免 JS
字体SimSun / Georgia / Courier New等宽备用
目标兼容范围
浏览器状态
IE 5.5 / Windows 95/98主要目标，可读性优先
IE 6-8 / Windows XP完全兼容
现代浏览器完全兼容 + 渐进增强（sticky、flex、rgba）
文本浏览器（Lynx 等）基本可读

兼容策略

  1. 分层退化 — 视觉效果（transition、box-shadow、rgba）允许退化，核心交互（表单提交、链接跳转、搜索）必须可用
  2. 免 JS 优先 — 所有核心功能不走 JavaScript：搜索是 HTML form + CGI、留言是 form POST、导航是 <a> 标签
  3. JS 仅用于增强 — 表情插入、回复引用、密码复制等辅助功能才用 JS
返回主页