web前端开发中浏览器兼容问题（一）

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。通俗的讲，就是使用不同的浏览器（Firefox、Chrome、IE6、IE7等）访问同一个网站，或者页面的时候，在一个浏览器下显示正常，在另一个浏览器下就全乱了。这是因为不同的浏览器对CSS解释不同。

最常用到的浏览器

最让人头疼的浏览器

那么浏览器兼容性有些什么问题呢？

1.div的垂直居中问题

•vertical-align：middle；

•line-height:  200px;

•将行距增加到和整个DIV一样高 ，然后插入文字，就垂直居中了。

•缺点是要控制内容不要换行。

2.margin加倍的问题

•设置为float的div在ie下设置的margin会加倍。

这是一个IE6都存在的bug

•解决方案是在这个div里面加上display:inline;

#Iamfloat{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/

}

display: inline;       默认。此元素会被显示为内联元素，元素前后没有换行符。

3.浮动IE产生双倍距离问题

#box{

float:left; width:100px;

margin:0 0 0 100px; //这种情况之下IE会产生200px的距离

display:inline; //使浮动忽略

}

•这里细说一下block与inline两个元素：

block元素的特点：总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);

Inline元素的特点：和其他元素在同一行上,不可控制(内嵌元素);

#box{

display:block; //可以为内嵌元素模拟为块元素

display:inline; //实现同一行排列的效果

diplay:table;

...

4.IE与宽度和高度的问题

•IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

•比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

#box{ width: 80px; height: 35px;}

html>body #box{

width: auto;

height: auto;

min-width: 80px;

min-height: 35px;

}

5.页面的最小宽度问题

•min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。

•为了让这一命令在IE上也能用，可以把一个

放到 标签下，然后为div指定一个类, 然后CSS这样设计：

#container{

min-width: 600px;

width:expression(document.body.clientWidth < 600? "600px": "auto" );

}

•第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，它实际上通过Javascript的判断来实现最小宽度。

缺点：这也会让你的HTML文档不太正规。