常见的兼容问题及解决方法
1. 行内元素或行内块元素在代码换行写时会出现左右的间隙，解决方法如下
1) 将代码写在一行上
2) 给父元素设置font-size：0，注意，子元素的字体大小需要单独设置
3) 给元素设置浮动
2. 当图片被放置于块元素中时，图片下方有间隙，解决方法如下
1) 给图片设置display:block;
2) 给图片设置vertical-align：top、middle、bottom
3) 给父元素设置font-size：0
4) 给图片设置浮动，同时清除父元素的塌陷
5) 给父元素加height
3. 该图片加超链接后，在IE浏览器下面图片有边框，解决方法如下
1) 给图片设置border：none
4. 给图片加超链接，然后设置鼠标移过超链接时显示边框的效果，但是发现边框只显示一半，解决办法如下
1) 给超链接设置display：block，同时要解决图片下方有缝隙的问题
5. 行内块元素上下错位问题，解决方法如下
1) 给行内块元素设置vertical-align：top、middle、bottom
2) 将元素浮动
6. 在不同浏览器下面元素的默认的margin和padding的值不相同，解决方法如下
1) *{margin:0;padding:0}
7. 上下的两个元素，默认的间距为较大的margin值，但是如果两个元素设置了浮动，那么这两个元素的间距就是margin之和
8. 父子关系的两个元素，如果给子元素设置float：left，且给子元素设置margin-left，那么在IE6下面margin-left加倍，解决方法如下
1) 给子元素设置：display：inline
9. 父子关系的两个元素，如果给父元素设置了text-align：center，那么在IE7及以下版本中，子元素会水平居中显示，但是在谷歌和火狐及IE高版本浏览器中子元素是不居中显示的，如果要子元素居中显示，解决方法如下：
1) 子元素设置margin：0 auto
10. 父子关系的两个元素，当给子元素设置margin-top时，父元素会同步下移，即子元素的margin-top实际上加到了父元素身上，解决方法如下：
1) 给子元素加margin-top的同时，给父元素加边框
2) 给子元素加margin-top的同时，给父元素加paddint-top：0.1px；
3) 给子元素加margin-top的同时，给父元素设置浮动
4) 不给子元素加margin-top，给父元素加padding-top
11. 两个兄弟元素，如果第一个元素设置了浮动，那么在IE6下面两个元素会在一行显示，且中间会有3px间隙，解决方法如下：
1) 给第二个元素也设置浮动
12. 一个元素如果没有设置height，那么这个元素的高度为自适应高度，此时如果没有内容，元素的高度会为0，如果有内容，那么元素的高度会被撑开。如果想做出如下效果：没有内容，元素有一个最小的高度，有内容元素的高度有内容撑开，可以给元素加min-height（该属性的作用就是给元素设置最小高度），但是需要注意的问题是IE6中不识别min-height，解决方法如下：
1) 给元素设置如下属性div{height:auto!important;height:200px;min-height:200px}，属性说明
height：auto！important，该属性的作用是让div的高度在所有浏览器中都是自适应高度，即高度有内容撑开
height：200px，该属性的作用是让IE6浏览器中有最小高度，因为IE6不识别min-height，所以只能用height，不用担心属性值覆盖问题，因为上一条属性中有！important
min-height：200px，该属性的作用是解决除IE6之外的所有浏览器的最小高度问题
13. 元素中内容垂直居中无法使用vertical-align：middle，解决方法如下
1) 给元素设置行高和高度相同的效果
14. 文本和文本框在垂直方向上没有居中对齐（次现象出现IE8及以前的浏览器），解决方法如下
1) 给文本框设置vertical-align：middle，注意的是，该方法只解决了文本框和提示文字的垂直关系，但是文本框里面的内容的垂直对齐方式并没有解决（即在IE低版本中文本框中的内容靠上显示），解决方法是给文本框设置行高和高度相同
15. cursor：hand属性在谷歌、火狐、IE高版本中不以手的形式显示，解决方法如下
1) 用cursor：pointer替换cursor：hand
16. 当通过给li设置高度调节li的显示效果时，在IE低版本中会发现排版错位问题，解决方法如下
1) 不要给li设置height，可以通过给li设置line-height的方法来调节li的高度
17. IE6不允许将:hover加在非超链接元素上，解决方法如下
1) 适当的用超链接将内容包含起来，然后给超链接设置:hover效果
18. 清除浮动时使用.clearFloat类，IE6下面不起作用，原因是clearFloat所在元素没有宽度，解决方法：
1) 给父元素一个固定宽度
2) 给父元素加zoom:1
19. 清除浮动时使用overflow：hidden，IE6下面不起作用，原因是父元素没有固定宽度，解决方法
1) 给父元素加一个固定宽度
2) 给父元素加zoom:1
IE条件注释：
1. 判断是否为IE浏览器，格式如下
2. 判断是否为IE浏览器的某个版本，格式如下
3. 判断是否为IE的某些版本，格式如下
注意：范围有如下内容
1) gt：大于
2) lt：小于
3) gte：大于等于
4) lte：小于等于
5) !：不等于
CSSHack：
1. CSS选择器Hack:
1) *html 选择器{样式声明}：这种写法是专门给IE6使用的
2) *+html 选择器{样式声明}：这种写法是专门给IE7使用的
2. CSS属性Hack：
3. ！important关键字的使用：该关键字可以提升样式的优先级，格式：属性名：属性值！important，注意设置了!important关键字的属性值不会被覆盖，而且它的样式会优先应用
