HTML5基础归纳（2）--常遇到的兼容问题及解决办法

在说到常遇到的兼容问题及解决办法之前，先来简单了解一下五大浏览器及其内核是什么。

1、Trident内核：代表作品是IE

2、Gecko内核：代表作品是Firefox，即火狐浏览器。

3、Webkit内核：代表作品是Safari、曾经的Chrome，是开源的项目。

4、Presto内核：代表作品是Opera。

5、Blink内核：由Google和Opera Software开发的浏览器排版引擎。

下面我们来说说常遇到的浏览器兼容问题：

1、图片间隙

解决办法：1）将<div>与<img>写在一行上

2）将<img>转换为块元素，即给<img>添加声明：display:block；

2、dt，li图片间隙，图片将div撑大3px

解决办法：将<img>转换为块元素，即给<img>添加声明：display:block；

3、默认高度，低于16px就无法正常显示

解决办法：1）给元素添加声明：font-size:0;

2）给元素添加声明：overflow:hidden;

4、双倍浮向（双倍边距），错误将浮向边界加倍显示

解决办法：给浮动元素添加声明：display:inline;

5、表单元素行高不一致

解决办法：给表单元素添加声明：float:left;

6、按钮元素默认大小不一致

解决办法：1）统一大小，可用a标签模拟

2）input外边套一个标签，在标签里面写样式，吧input边框去掉

3）若按钮是图片，可将图片作为按钮背景图片

7、百分比bug，在IE6一下版本中解析百分比时，会按四舍五入的方式计算，从而导致50%+50%>100%

解决办法：给右边元素添加声明：clear:right; clear:left; clear:both;

8、按钮解析边框时会把边框解析在内部，但不会影响按钮原有的大小

9、鼠标指针bug，cursor属性的hand属性值只在IE识别，cursor属性的pointer属性值在IE6及以上版本识别

解决办法：统一鼠标形状为手形，即添加声明：cursor:pointer;

cursor常用样式可自行查询，这里就不多说了

10、透明属性

IE8以下写法：filter:alpha(opacity=value);/*value取值范围为1-100*/

其他浏览器兼容写法：opacity:value;/*value取值范围为0.1-1*/

11、列表阶梯bug，列表阶梯通常会在给li子元素a标签使用float:left;时触发，在IE6及以下版本会出现垂直或阶梯状

解决办法：给父元素设置浮动属性即可

12、在IE6及以下版本想去掉input默认边框，设置：border:0;即可

13、li标签的面的a标签设置display:block;后悔出现行高不一致

解决办法：给li设置浮动属性，并将li宽度等于父元素宽度

14、子元素没设置任何浮动，但设置了margin-top属性后，会错误的把margin-top属性加给父元素（这是标准浏览器的问题）

解决办法：给父元素添加声明：overflow:hidden;

15、在IE6中隐藏元素，如添加display:none;的元素被包含在浮动元素里，可能会引发文本重复bug

解决办法：给浮动元素添加：display:inline;

16、若要给元素定义100%宽高度，必须明确它的父级元素为100%；若要定义满屏高度，就先给html和body定义height：100%；

17、浮动元素高度自适应（父元素不写高度时，子元素写浮动后，父元素高度会发生高度塌陷）

解决办法：1）给父元素添加声明：overflow:hidden;

2）在浮动元素下方添加空div，并给元素添加声明：clear:both;height:0;overflow:hidden;

3）万能清除浮动法（针对IE6以下，一般使用该方法）

格式：.clearfix:after{content:"."; clear:both; display:block; heihgt:0; overflow:hidden; visibility:hidden;}

.clearfix{zoom:1;}

18、最小高度自适应解决办法

1）min-height:value; _height:value;

2）min-height:value; height:auto !imgportant; height:value;（建议使用该方法）