很多网站前端设计师在设计网站的时候,都会碰到网站在快速浏览器下显示正常,在ie下可能就会出现错位的情况!所以我们在设计网站之前一定要先了解IE兼容性问题。

关于CSS对IE的兼容问题一直是DIV+CSS的一个大问题,因为不通浏览器识别代码产生的效果是不同的,所以造成了很多浏览器对相同的CSS,产生不同的效果,这样就产生了网站的错位,个人理解是这样的。

电脑网页乱码怎么回事(ie浏览器兼容性问题怎么解决)(1)

网站设计

先来了解下浏览器的内核:

浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言,执行 javascript 语言来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多,如加上没什么人使用的非商业的免费内核,可能会有 10 多种,但是常见的浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。

各个浏览器内核不同,就可能造成不兼容的情况出现。

常见的兼容性问题:

1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同

解决方案: css 里增加通配符 * { margin: 0; padding: 0; }

2、IE6双边距问题;在 IE6中设置了float , 同时又设置margin , 就会出现边距问题

解决方案:设置display:inline;

3、当标签的高度设置小于10px,在IE6、IE7中会超出自己设置的高度

解决方案:超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

4、图片默认有间距

解决方案:使用float 为img 布局

5、IE9一下浏览器不能使用opacity

解决方案:

opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

6、边距重叠问题;当相邻两个元素都设置了margin 边距时,margin 将取最大值,舍弃最小值;

解决方案:为了不让边重叠,可以给子元素增加一个父级元素,并设置父级元素为overflow:hidden;

7、cursor:hand 显示手型在safari 上不支持

解决方案:统一使用 cursor:pointer

8、两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative ;且高度大于父元素,在IE6、IE7会被隐藏而不是溢出;

解决方案:父级元素设置position:relative

关于浏览器兼容性的这种错位,因为浏览器的种类越来越多,从IE5,6,7,8,9,10这些都是比较常用的浏览器,但是正因为各种浏览器的出现,为了更好的兼容各个版本的浏览器,我们就需要学习如何来处理IE的兼容问题。从而网络上出现了很多所谓的HACK ,其实也就是针对各个浏览器的特点,来对各种浏览器的不同嗜好,产生的不同效果,实现的一种兼容各个版本浏览器的效果。

这个地方我们我们不是来讲各种可见的HACK效果,这些大家,可以在百度上来一下,就能找到我们所要的结果。

因为IE从6开始为了适应各个版本,就自身有了一个兼容性,所以我们可以指定给网页一个兼容特性;

比如 网页在IE7下无错位,但在IE6 和 IE8下有错位,那么我们就可以指定当用户使用IE6和IE8的时候直接指定给IE6 和 IE8采用IE7的兼容模式来实现网页的不错位。

但是这样一来,网页的兼容特性只是实现了,IE6,IE7,IE8的一个兼容,为了同时兼容FF,我们这个时候就需要使用HACK来达到兼容FF的效果。

这样我们使用IE自身的特性和HACK之间的特性就达到了网页的兼容效果,我认为这样实现兼容效果是最简单最方便的。这样我们其实就是对一种IE和FF之间的HACK在起作用,相对的写了很少的代码,也很实用和方便。

兼容性的问题越来越重要了,特别是IE8的出现让当时大半的网页都出现错位等现象,而解决的办法,我们来看一个网上的例子:

“css兼容IE8

微软在IE8提供三种解析页面的模式:

IE8 Standard Modes :默认的最标准的模式,严格按照W3C相关规定

IE7 Standards Modes :IE7现在用的解析网页的模式,开起机关是在<head>中加入 <meta http-equiv="X-UA-Compatible" content="IE=7">

Quirks Modes :IE5用的解析网页的模式,开起机关是删除HTML顶部的DOCTYPE声明

注意:不同模式间的网页在IE8中可以互相 frame ,因此因不会模式下的DOM和CSS渲染不一样,所以会引发很多问题,务必注意如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下:

<meta http-equiv="x-ua-compatible" content="ie=7" />”

加了以上这个代码,就可以比较完美的解决一般的兼容性问题了。