当前位置：首页> 正文

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

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

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

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

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

网站设计

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

浏览器内核又可以分成两部分：渲染引擎(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的网站上添加一行代码即可解决问题，此代码如下：