---

 常见的兼容问题及解决方法

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关键字的属性值不会被覆盖，而且它的样式会优先应用