阅读量:0
主流浏览器CSS兼容问题包括：不同浏览器对CSS属性的支持程度、解析方式以及渲染效果存在差异。
以下是对主流浏览器CSS兼容性问题的汇总：
| 问题类别 | 问题描述 | 解决方案 |
| 渲染相关 | IE68的双倍边距问题 | 使用display: inline;来修复 |
| IE67不支持minheight和minwidth属性 | 使用!important覆盖默认样式或使用JavaScript判断实现最小宽度 | |
| 脚本相关 | IE68的JS调用问题 | 使用Google Code上的项目，如IE7.js和IE8.js |
| 其他类别 | IE6默认div高度为字体高度的问题 | 设置overflow: hidden;或lineheight: 1px; |
| 渲染相关 | IE与宽度和高度的问题 | 使用!important规则或JavaScript动态调整样式 |
| 脚本相关 | IE6子元素绝对定位的问题 | 在子元素中使用_left: 20px; _top: 1px;等技巧 |
| 其他类别 | IE67图片下方空隙问题 | 将图片转换为块级对象或设置图片的垂直对齐方式 |
| 渲染相关 | IE6两个层之间3像素间距问题 | 右边层也采用浮动或添加marginright: 3px; |
| 其他类别 | IE6透明PNG图片带背景色问题 | 使用filter属性和_backgroundimage: none; |
| 脚本相关 | IE67 lineheight失效问题 | 将img和文字都设置为float |
| 渲染相关 | IE6 td自动换行问题 | 设置tablelayout: fixed;和wordwrap: breakword; |
| 脚本相关 | IE67 li间隙问题 | 给li加浮动或verticalalign: top; |
| 其他类别 | IE6最后一行子元素的下margin失效问题 | 确保子元素的宽度之和不超过父级的宽度或不满行状态 |
FAQs
Q1: 如何解决IE68中的双倍边距问题？
A1: 可以通过在该div内添加display: inline;来修复这个问题。
#imfloat { float: left; margin: 5px; /* IE下理解为10px */ display: inline; /* IE下再理解为5px */ }Q2: 如何解决IE6中图片下方出现空隙的问题？
A2: 可以采用以下方法之一：
1、将图片转换为块级对象，通过设置display: block;。
2、设置图片的垂直对齐方式，如verticalalign: top;或verticalalign: middle;。
3、如果父对象的宽高固定，可以设置图片大小随父对象而定，并设置父对象的overflow: hidden;。
| 兼容问题 | 浏览器 | 解决方案 |
| 背景色 | IE68 | 使用条件注释和CSS hack |
| 边框圆角 | IE6 | 使用PNG图片或CSS hack |
| 盒模型 | IE68 | 使用CSS hack或设置boxsizing: borderbox |
| 阴影效果 | IE68 | 使用CSS hack或PNG图片 |
| 透明度 | IE68 | 使用CSS hack或PNG图片 |
| 渐变背景 | IE68 | 使用CSS hack或PNG图片 |
| transform属性 | IE9及以下 | 使用CSS hack或JavaScript |
| flex布局 | IE10及以下 | 使用CSS hack或JavaScript |
| 媒体查询 | IE8及以下 | 使用CSS hack或JavaScript |
| 伪元素 | IE8及以下 | 使用CSS hack或JavaScript |
| 自定义字体 | IE68 | 使用CSS hack或Web字体 |
| CSS动画 | IE10及以下 | 使用CSS hack或JavaScript |
| 字体大小单位 | IE68 | 使用CSS hack或em单位 |
| 行内块元素宽度 | IE68 | 使用CSS hack或float属性 |
| 行内元素宽度 | IE68 | 使用CSS hack或display: inlineblock |
| 图片底边距 | IE68 | 使用CSS hack或verticalalign属性 |
| 图片间距 | IE68 | 使用CSS hack或float属性 |
| 列表缩进 | IE68 | 使用CSS hack或liststyle属性 |
| 滚动条样式 | IE68 | 使用CSS hack或JavaScript |
表格仅列举了一部分主流浏览器CSS兼容问题，实际情况可能更加复杂，在开发过程中，建议使用兼容性测试工具，如Can I use，以确保您的网站在不同浏览器上都能正常显示。
