浏览器兼容问题总结
浏览器兼容问题是指，不同厂商开发的浏览器针对同一段代码的不同解析，造成页面展示效果出现差异的情况。为了追求显示效果一致，前端开发人员需要针对不同兼容问题采用相应的方法进行处理。以下为开发过程中常见问题的总结与解决方案。
1. <!DOCTYPE HTML> 文档类型的声明
产生条件：IE6 浏览器中，未书写文档声明会触发怪异解析现象。
解决办法：书写文档声明。
2. 横向双外边距
产生条件：IE6 中块元素浮动后（左浮左 margin，右浮右 margin），出现双倍 margin。
解决办法：在浮动样式中加入 display: inline，或调整浮动方向与 margin 的组合。
3. 默认行高问题
产生条件：IE6/IE7/遨游浏览器中文字高度超出盒模型内容高度。
解决办法：设置 overflow: hidden 或将 line-height 设置为小于块的高度。
4. 默认样式差异
产生条件：不同浏览器默认的外边距和内边距不同。
解决办法：使用 CSS reset 文件清除默认样式。
5. img 外部的 border
产生条件：img 外部有 a 标签时，边框会出现。
解决办法：设置 img 的边框为 border: 0。
6. 经典 3 像素 Bug
产生条件：IE6 中浮动块与未浮动块同一行时，出现 3px 间距。
解决办法：设置非浮动元素浮动。
7. PNG 格式图片透明问题
产生条件：IE6 不支持 PNG 透明。
解决办法：使用 JavaScript 处理或用 GIF/JPG 替代。
8. 清浮动的默认行高问题
产生条件：使用空 div 清浮动时，IE6 中会存在默认行高。
解决办法：设置 height: 0; overflow: hidden; clear: both。
9. 图片默认间距
产生条件：img 标签换行后。
解决办法：为 img 设置 float。
10. hover 不适用于所有标签
产生条件：IE6 中 hover 仅支持 a 标签。
解决办法：用 JavaScript 模拟或嵌套行内标签。
11. table 的 border-color 无效
产生条件：IE6 中 table 的 border-color 设置无效。
解决办法：通过 CSS 样式控制边框颜色。
12. 透明 rgba 与 opacity
产生条件：IE6 不支持。
解决办法：使用滤镜 filter: alpha(opacity=60)。
13. 子选择器问题
产生条件：IE6 不支持子选择器 E > F。
解决办法：用其他选择器或后代选择器替代。
14. 最大最小宽度问题
产生条件：IE6 不支持 min/max-height 和 min/max-width。
解决办法：使用 _height 和 _width Hack。
15. 垂直居中问题
产生条件：IE6 不支持 display: table-cell。
解决办法：单行文本用 line-height，多行文本使用其他居中方法。
16. input 聚焦样式不同
产生条件：不同浏览器表现不同。
解决办法：使用 outline: none 清除样式。
17. 鼠标样式兼容问题
产生条件：cursor: pointer 和 cursor: hand 兼容性问题。
解决办法：同时设置 cursor: pointer; cursor: hand;。
18. 子标签无法撑开父标签高度
产生条件：父标签未浮动，子标签浮动。
解决办法：清浮动、设置 overflow: hidden 或固定高度。
19. li 的间距问题
产生条件：IE6 中 li 设置宽高且内部元素浮动。
解决办法：不设置宽高或取消浮动。
20. 行内元素布局混乱
产生条件：包含框内有绝对定位的元素且使用百分比定位。
解决办法：加入 zoom: 1。
21. 多显示一个字符
产生条件：浮动元素间夹杂 HTML 注释，宽度设置 100%。
解决办法：删除注释。
22. CSS 优先级问题
产生条件：IE6 中 !important 可能不起作用。
解决办法：单独设置样式。
23. 图片下部多余高度
产生条件：IE6 中图片下方多余 5px 高度。
解决办法：设置 display: block 或调整父对象属性。
24. Hack 技术
说明：针对不同 IE 版本调整样式：
_: IE6*: IE6/7+: IE6/7\9: IE6-IE10\0: IE8-IE11
25. position: fixed 不兼容
产生条件：IE6 中不支持。
解决办法：使用 CSS Hack 和 JavaScript。
26. background-size 不支持
产生条件：IE6-IE8 中。
解决办法：使用滤镜。
27. z-index Bug
产生条件：IE6-IE8 中层级失效。
解决办法：提高父级层级。
28. IE6 透明兼容问题
解决办法：使用滤镜 progid:DXImageTransform.Microsoft.gradient。
29. 不支持 opacity
解决办法：使用 filter 和 -ms-filter。
以上为常见浏览器兼容问题及解决方法的汇总。
评论区