浏览器兼容性问题

之前我用div+css写网页时，一般会用dreamweaver来写，dreamweaver默认的浏览器是ie，所以我就直接用ie浏览，一路畅通无阻，终于把网页写完了，放到别的浏览器或者ie浏览器的其他版本，却发现网页布局全乱了，当时就蒙了，还以为是代码不小心被修改了，检查了半天也没发现有什么错误，后来才会知道，是因为其他浏览器不兼容。于是我就了解了一下关于兼容性的问题。

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况，在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。

通过了解我发现要解决兼容性问题，还得从css入手，浏览器不兼容是因为有些代码不被识别，每个浏览器都有自己识别的代码，那么我们就针对每个浏览器各写一段代码，让它们各执行各的，这就行了。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack。

CSS Hack的原理是什么

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，当不能识别下划线"_"，而firefox两个都不能认识。等等

以: " #demo {width:100px;} "为例;
#demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/
* html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
*+html #demo {width:130px;} /*会被IE7执行*/
所以最后,#demo的宽度在三个浏览器的解释为:
FIREFOX:100px;
ie6:120px;
ie7:130px;、

理解了原理，我们来看一下我们经常会遇到的兼容性问题及如何解决的实例。

1.IE6双倍margin的BUG(双边距)

问题说明：这是ie6一个著名的bug，当一个元素向一边浮动时，其它同一个方向如果有margin的话，ie6就会产生双倍的margin。例如：

<div style="float: left;margin-left: 10px;"></div>

在ie6下显示会有margin-left:20px的距离
解决方法：加个_display:inline:属性，例如

<div style="float: left;margin-left: 10px;_display: inline;"></div>

2.图片下方出现几像素的空白间隙

大家看这段代码有啥问题：

<div>
 
<img src=”” mce_src=”” />

  </div>

把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写

<div>

<img src=”” mce_src=”” /></div>

后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案：给img设定 display:block。

3.页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。

解决办法：为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：

然后CSS这样设计：

#Container{

min-width: 600px;

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

}

第一个min-width是正常的；但第2行的width使用了JavaScript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

4.FF下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会.

解决办法：给DIV设定IE、FF两个宽度，在IE的宽度前加上IE特有标记" * "号。

5.页面居中问题.

body {text-align: center;} 在IE下足够了，但firefox下失效。

解决办法：加上"margin-right: auto;margin-left: auto; "

6.UL和FORM标签的padding与margin

ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0；

解决办法：css中首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,后面就不会为这个头疼了.

7.区别FF，IE7，IE6：

background:orange;
*background:green;
_background:blue;
background:orange;
*background:green !important;
*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

友情链接

汕头招聘网 | 山东招聘网 | 郑州教育培训 | 软件下载