HTML5带来了诸多新特性，包括语义化标签、本地存储、Canvas绘图、音视频支持等，但是不同浏览器的内核差异和版本迭代速度不同，导致这些新特性在部分浏览器中无法被正常识别和支持，处理这类兼容问题是前端开发中的常见需求。
常见的HTML5兼容问题
语义化标签兼容问题
HTML5新增的<header>、<footer>、<nav>、<section>等语义化标签，在IE8及以下版本的浏览器中无法被识别，浏览器会将这些标签当作未知元素处理，默认按照行内元素渲染，同时无法通过CSS设置样式，导致页面布局错乱。
新API兼容问题
HTML5提供的localStorage、sessionStorage、Canvas绘图API、地理定位API等，在旧版本浏览器中不存在，直接调用这些API会抛出未定义的错误，导致页面功能失效。
表单新特性兼容问题
HTML5为表单新增了email、date、range等输入类型，以及placeholder、required等属性，部分旧浏览器不支持这些新类型和属性，会导致表单展示异常，验证功能无法生效。
对应的解决方案
使用html5shiv解决语义化标签兼容问题
html5shiv是一款专门用于解决IE6-IE8浏览器无法识别HTML5语义化标签的兼容脚本，原理是创建这些未知元素，让浏览器能够识别并支持对应的CSS样式。使用时只需要在<head>标签中引入即可，注意要放在CSS样式之前。
<!--[if lt IE 9]> <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
上述代码使用了IE条件注释，只有在IE9以下版本的浏览器中才会加载html5shiv脚本，不会影响其他现代浏览器的加载性能。
使用polyfill填充新API
polyfill是一段代码，用于为旧浏览器提供其不支持的新特性的实现。针对不同的HTML5 API可以选择对应的polyfill库：
- 本地存储兼容可以使用
store.js，它会在浏览器不支持localStorage时自动降级使用cookie存储 - Canvas兼容可以使用
excanvas.js，为IE8及以下浏览器提供Canvas基础绘图能力 - 音视频兼容可以使用
mediaelement.js，在不支持HTML5音视频的浏览器中自动切换到Flash播放方案
以下是一个使用store.js实现本地存储兼容的示例：
// 引入store.js后，直接使用store对象操作存储，无需判断浏览器是否支持localStorage
// 存储数据
store.set('user_name', '张三');
// 获取数据
var name = store.get('user_name');
// 删除数据
store.remove('user_name');
表单特性的兼容处理
对于表单的新输入类型和属性，可以通过特性检测来判断浏览器是否支持，再给出对应的降级方案。
判断浏览器是否支持某个输入类型的示例：
function checkInputSupport(type) {
var input = document.createElement('input');
input.setAttribute('type', type);
// 如果浏览器不支持该类型，设置的type会被忽略，默认返回text
return input.type === type;
}
// 检测是否支持email类型
var isEmailSupport = checkInputSupport('email');
if (!isEmailSupport) {
// 不支持时手动添加邮箱格式验证逻辑
document.querySelector('input[type="email"]').addEventListener('blur', function() {
var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
if (!reg.test(this.value)) {
alert('请输入正确的邮箱格式');
}
});
}
对于placeholder属性，也可以使用类似的特性检测，在不支持的浏览器中通过JavaScript模拟实现占位符效果。
其他注意事项
1. 开发时尽量使用标准化的语法，避免使用浏览器特有的私有前缀，必要时可以通过Autoprefixer工具自动添加CSS前缀，减少兼容工作量。
2. 对于非核心功能，可以采用优雅降级的处理方式，在不支持新特性的浏览器中隐藏对应功能，而不是强制要求所有浏览器都支持，避免投入过多的兼容成本。
3. 上线前可以使用BrowserStack等工具进行多浏览器测试，提前发现并解决兼容问题，避免上线后出现用户端的功能异常。