上犹电脑信息网我们一直在努力
您的位置:上犹电脑信息网 > 电脑蓝屏 > IE兼容性问题:网站乱码问题怎么办?-ie8蓝屏

IE兼容性问题:网站乱码问题怎么办?-ie8蓝屏

作者:上犹日期:

返回目录:电脑蓝屏

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


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


网站设计


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


浏览器内核又可以分成两部分:渲染引擎(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现在用的解析网页的模式,开起机关是在中加入


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


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



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


相关阅读

关键词不能为空
极力推荐

电脑蓝屏_电脑怎么了_win7问题_win10问题_设置问题_文件问题_上犹电脑信息网

关于我们