为什么主流浏览器在CSS兼容性上还存在问题？

主流浏览器CSS兼容问题包括：不同浏览器对CSS属性的支持程度、解析方式以及渲染效果存在差异。

以下是对主流浏览器CSS兼容性问题的汇总：

问题类别	问题描述	解决方案
渲染相关	IE68的双倍边距问题	使用display: inline;来修复
	IE67不支持minheight和minwidth属性	使用!important覆盖默认样式或使用JavaScript判断实现最小宽度
脚本相关	IE68的JS调用问题	使用Google Code上的项目，如IE7.js和IE8.js
其他类别	IE6默认p高度为字体高度的问题	设置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: 可以通过在该p内添加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，以确保您的网站在不同浏览器上都能正常显示。