HTML常见兼容性问题

HTML 常见兼容性问题

1. 像素问题

使用 float 引起的，解决办法：使用 display: inline 加 -3px 兼容。

2. 超链接 hover 点击后失效

解决办法：使用正确的书写顺序 link visited hover active。

3. IE z-index 问题

解决办法：给父级添加 position: relative。

4. Png 透明

解决办法：使用 JS 代码（如 DD_belatedPNG）兼容 IE6。

5. Min-height 最小高度

解决办法：!important 解决 IE6 不识别 min-height 的问题。

补充

补充：以上条目大多针对 IE6/7 这些远古浏览器，现代项目里基本只剩历史价值，更值得关注的是移动端与新标准的兼容。

现代兼容性关注点

• 浏览器前缀：CSS3 属性使用 Autoprefixer 处理
• 移动端：viewport、touch 事件、键盘弹出后布局抖动
• Polyfill：core-js、@babel/preset-env、polyfill.io
• 渐进增强：先做好基础功能，再用能力检测加新特性

if ('IntersectionObserver' in window) {
  // 使用 IntersectionObserver
} else {
  // 回退到 scroll 监听
}

一些兼容小技巧

• box-sizing: border-box 统一盒模型，避免不同浏览器宽度计算差异
• flex / grid 布局时注意 Safari 的旧版本识别问题
• 图片 vertical-align、表单 line-height 在不同浏览器下默认不一致，需要显式重置

来源整理自：我的有道云笔记