很多网站前端设计师在设计网站的时候,都会碰到网站在快速浏览器下显示正常,在ie下可能就会出现错位的情况!所以我们在设计网站之前一定要先了解IE兼容性问题。
关于CSS对IE的兼容问题一直是DIV+CSS的一个大问题,因为不通浏览器识别代码产生的效果是不同的,所以造成了很多浏览器对相同的CSS,产生不同的效果,这样就产生了网站的错位,个人理解是这样的。
网站设计
先来了解下浏览器的内核:
浏览器内核又可以分成两部分:渲染引擎(layoutengineer或者RenderingEngine)和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提供三种解析页面的模式:
IE8StandardModes:默认的最标准的模式,严格按照W3C相关规定
IE7StandardsModes:IE7现在用的解析网页的模式,开起机关是在<head>中加入<metahttp-equiv="X-UA-Compatible"content="IE=7">
QuirksModes:IE5用的解析网页的模式,开起机关是删除HTML顶部的DOCTYPE声明
注意:不同模式间的网页在IE8中可以互相frame,因此因不会模式下的DOM和CSS渲染不一样,所以会引发很多问题,务必注意如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下:
<metahttp-equiv="x-ua-compatible"content="ie=7"/>”
加了以上这个代码,就可以比较完美的解决一般的兼容性问题了。