常见浏览器兼容问题及解决

一、什么是浏览器兼容问题
所谓浏览器兼容问题就是指不同浏览器或同种浏览器不同版本对相同代码解析效果不同，浏览器兼容问题主要有如下表现
 1.页面中的元素的默认值不同
 2.同种代码在不同浏览器下解析效果不同
二、为什么会出现浏览器兼容问题
浏览器中最重要的程序被称为”渲染引擎”，也称为浏览器内核，它的作用就是用来解析HTML标签和CSS代码。不同的浏览器的浏览器内核不同，导致它们对同一段代码的解析效果也不同，这就是浏览器兼容问题产生的直接原因。
三、常见的浏览器兼容问题及解决方法
1.图片下方有间隙，解决方法：将图片变成块元素，即设置img{display:block}
2.图片间有间隙，解决方法：
1)将HTML代码写在一行上
2)给父元素font-size设置为0
3)给图片设置float属性
3.图片加超链接后，在IE浏览器下有边框，解决方法：给图片设置img{border：none}
4.图片设置超链接后，如果要加鼠标滑过显示边框效果，那么默认情况下边框只显示一半，解决方法：给超链接设置a{display:block;}
5.行内块元素上下错位问题，解决方法：给行内块元素设置vertical-align：top/middle/bottom

6.不同浏览器下margin和padding的默认值不同，解决方法是：设置*{margin:0;padding:0}
7.上下结构的两个元素，两者间的距离是较大的margin值，解决方法：给两个元素设置浮动
8.两个父子关系的元素，如果子元素设置了浮动，且子元素设置了margin-left，那么在IE6下面margin-left的值加倍，解决方法：将子元素设置为display:inline
9.父子关系的两个元素，当给子元素设置了margin-top的时候，那么父元素和子元素同步下移，解决方法
1)在给子元素加margin-top的同时，给父元素加边框
2)在给子元素加margin-top的同时，给父元素加padding-top:0.1px;
3)在给子元素加margin-top的同时，给父元素设置float属性
4)不给子元素加margin-top，给父元素加padding-top
10.两个兄弟元素，当给第一个元素设置了浮动后，在IE6下面两各元素会在一行显示，且两者间有3px间隙，解决方法：将第二个元素设置float

11.元素默认的高度为自适应高度，当元素没有内容时，元素的高度为0，如果给元素设置高度，那么内容多的时候，内容会出现溢出现象，此时如果要实现这一效果，即元素没有内容时有一个最小高度，元素有内容且内容很多时元素的高度由内容撑起来，此时需要给元素加min-height属性，该属性的作用就是给元素设置一个最小高度，但是IE6下面不支持min-height属性，解决方法是给元素加如下代码：height:auto!important;height:IE6下面的最小高度，简言之，如果让所有浏览器都具有最小高度，就在元素中加如下三句话：
div{min-height:谷歌、火狐浏览器下的最小高度；height:auto!important；height:IE6下面的最小高度}
12.元素中的文本内容垂直居中问题，解决方法：设置行高和高度相同，如果行高小于高度，那么内容在中分线以上，如果行高高于高度那么内容在中分线以下
13.IE低版本浏览器不支持将:hover加在非超链接元素上，解决方法是将hover效果加载超链接上
14.清除浮动时使用.clearFloat类，IE6下面不起作用，原因是clearFloat所在元素没有宽度，解决方法：
1)给父元素一个固定宽度
2)给父元素加zoom:1
15.清除浮动时使用overflow：hidden，IE6下面不起作用，原因是父元素没有固定宽度，解决方法
1)给父元素加一个固定宽度
2)给父元素加zoom:1

四、CSSHACK
所谓CSSHACK也是解决浏览器兼容的一种方法，它是指网页开发人员针对不同的浏览器写出不同的CSS代码，CSSHACK包含以下几种形式
1.IE条件注释
2.选择器hack
3.属性hack
4.！important

五、IE条件注释
所谓IE条件注释主要是针对IE不同版本的浏览器所写出的CSS代码，格式如下

1.格式1：判断是否是IE浏览器

2.格式2：判断是否是IE的某个版本

        样式表

3.格式3：判断是否符合某个范围，表示方位的方法是
1)gt：大于
2)lt：小于
3)gte：大于等于
4)lte：小于等于
5)!：不等于

    样式表

六、选择符hack
就是指通过修饰选择符进而针对不同的IE浏览器给出不同的样式，形式有:

1.html 选择符{样式}：针对的是IE6
2.+html 选择符{样式}：针对的是IE7

七、属性hack
就是指通过修饰属性名称，进而针对不同的IE浏览器给出不同的样式

.header{_width:100px;}  /*ie6专用*/
.header{*+width:100px;}  /*ie7专用*/
.header{*width:100px;}  /*ie6，ie7共用*/
.header{width:100px\0;}  /*ie8,ie9共用*/
.header{width:100px\9;}  /*ie6,ie7,ie8,ie9共用*/
.header{_width:300px\9\0;}  /*ie9专用*/

八、！important
提示样式的优先级，它的优先级最高，高于行内样式