在制作html5静态网页时，我们往往会使用header、nav、article、section、footer等语义化标签，也会用到canvas、localStorage、geolocation等新接口。但旧版浏览器例如IE8及更早版本，或者一些早期移动端内置浏览器，并不认识这些标签，也不会给它们应用默认的块级显示规则，这就导致页面结构错乱、脚本报错。要让静态网页在旧环境中仍能正常呈现与基本可用，需要从标签识别、样式回归和接口补齐三个层面入手。
一、让旧浏览器识别html5语义标签
旧引擎的HTML解析器遇到它不认识的标签名时，虽然会把元素放进DOM，但并不会赋予其任何默认样式，且在IE中通过常规方式无法用CSS设置display。解决这个问题的经典方案是html5shiv（也叫html5shim），它利用JavaScript在页面加载前动态创建这些未知标签，从而触发浏览器以已知元素的方式处理它们。
通常我们将html5shiv通过IE条件注释限制在旧版本中加载，避免现代浏览器无谓请求。下面是一段常见的兼容头写法，注意其中使用了条件注释，仅IE9以下才会引入脚本：
<!--[if lt IE 9]> <script src="https://cdn.ipipp.com/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
引入脚本之后，还需要在CSS中显式声明这些标签为块级元素，因为即便标签被识别，旧浏览器也没有对应的UA样式表。下面这段CSS可以放在主样式文件开头：
header, nav, section, article, aside, footer, figure, figcaption {
display: block;
}
这种做法的优点是改动极小、兼容范围广，几乎覆盖所有需要语义标签的场景；缺点是如果禁用JavaScript，IE旧版依旧无法识别标签。因此在极端环境下，也可考虑直接用div配合class命名，但这会损失语义化价值。
二、使用CSS兼容技巧处理新属性
除了标签本身，html5静态页常搭配CSS3新属性，如圆角、阴影、过渡。旧浏览器会直接忽略无法解析的声明，不会报错，但视觉效果缺失。我们可以采用渐进增强思路：先写基础布局保证可读，再用新属性做增强。
例如为按钮添加圆角，在旧浏览器中它会呈现直角，但不影响点击与文字显示：
.btn {
padding: 8px 14px;
background: #337ab7;
color: #fff;
/* 以下属性旧浏览器忽略 */
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
如果需要让IE8等支持常用CSS3特性，可引入polyfill类库如css3pie，它通过VML绘制圆角和阴影。不过这会增加复杂度，一般静态展示页建议优雅降级而非强行模拟。
三、用polyfill补齐html5接口能力
html5提供的canvas绘图、本地存储、地理位置等接口，在旧浏览器中可能是undefined。直接调用会导致脚本中断。我们可以使用feature detection判断，再加载对应polyfill。
以localStorage为例，下面代码检测是否存在该对象，不存在时用cookie模拟一个最简版本，保证静态页中的记住偏好功能不报错：
if (typeof window.localStorage === 'undefined') {
window.localStorage = {
_data: {},
setItem: function(k, v) { this._data[k] = String(v); },
getItem: function(k) { return this._data[k] || null; },
removeItem: function(k) { delete this._data[k]; }
};
}
// 之后统一使用localStorage.setItem('key', 'val')
对于canvas，可以使用excanvas为IE8提供基于VML的兼容层。但这类polyfill体积不小，若静态页仅做内容展示，可考虑检测不支持时隐藏绘图区并提示文字。
四、条件注释与优雅降级实践
条件注释是旧IE特有的兼容手段，可针对不同版本输出不同标记或样式引用。结合优雅降级，我们能确保核心内容始终可读。
下面示例为IE8以下单独引入兼容样式表，其中重置了部分布局以适应旧盒模型：
<!--[if lt IE 9]> <link rel="stylesheet" href="ie8-compat.css" /> <![endif]-->
在静态网页开发中，建议先把内容结构用纯净html5写出，再通过外部兼容层修补旧环境。这样未来浏览器升级后，只需移除兼容代码即可，不会导致维护负担累积。综合运用标签补丁、CSS降级和接口polyfill，就能让html5静态网页在旧浏览器中保持基本可用与结构完整。