ie6错位的几种情况分析

开发 前端
IE6虽然诞生于2001年10月, 但至今一直都很流行, 特别是在国内网民中间,IE6的占有率达60%以上。本文对在ie6下出现错位的几种情况进行了总结。

由于IE6的使用人群非常广泛,这就导致所有的网站开发人员都得向IE6的网页标准看齐。为了能让网站在IE6下可以正常显示,不知花费了多少开发人员的休息时间来加班调试。甚至有些网站干脆只针对IE6进行支持,使用其他浏览器浏览时会导致网页错位或者不响应等问题。

今天做了个项目,做到一半用浏览器测试了一下,所有浏览器都正常,就是ie6下错位,css找了半天头都大了,还是多出1像素,但是检查所有都正常,郁闷,之后发现了ie6一般出现错位的几种情况(备用+分享):

 

IE6错位一般有两种情况。

一种是,你把所有像素都填满了,例如900px,你左,200,中500,右200,在其他都没有问题,理论上也对,可是IE6不行。所以你必须得稍减到几像素才可以,例如200+498+200,这样可以解决这个问题,其实一般设计左右之间都有空。如果左右结构的话,一般是左边200加一个空20再加上680,其实你只要设置左float:left,右float:right就行了。中间的20就留它去自行决择,这样左右错位就解决了。

第二种就完全是你css设置的问题了。如果左中右结构 左中都设置成float:left,右设置成float:right,中和右的空可以不管,可是左中为了留空必须在中的css 里加上margin-left:10px才可以解决,切记一定要加上display:inline。否则在ie6下面,margin-left:10 px就变成20px;

一般情况下错位都是由于上两种原因造成的,也有的是可能因为都设置好宽度了,但里面的内容超过了这个宽度,你只要在个css加上over-flow:hidden.就行了。

现在的网站开发人员,为了支持所有浏览器的同时支持IE6, 添加的独立代码要达几十甚至几百行。为了兼容IE6,开发人员浪费了很多时间和精力。

【编辑推荐】

  1. div+css牛人也得看的15个css
  2. Java开发者需要注意的十条法则
  3. 3款新鲜的CSS3&HTML5框架
  4. 10款刚出炉的jQuery特效插件
  5. j2ee学习方法摘要
责任编辑:于铁 来源: 站酷
相关推荐

2010-08-20 09:33:22

IE6IE7IE8

2009-08-14 09:20:40

抵制IE6

2010-08-27 14:55:23

IE6IE7IE8

2010-02-01 08:41:23

GoogleIE6

2011-11-08 11:07:26

2010-08-18 09:11:11

IE6

2012-03-07 09:44:29

iPadIE6

2010-09-06 15:06:29

IE6IE7Firefox

2009-12-01 09:25:09

微软IE6用户升级

2009-08-13 10:12:07

IE的CSS Bug

2013-04-22 09:32:36

TwitterIE6IE7

2010-08-17 16:18:23

IE6IE7FF

2012-08-14 17:14:50

浏览器IE6

2010-08-18 10:24:51

IE6IE7IE8

2010-03-08 08:45:26

IE6葬礼

2010-08-19 10:56:55

JSIE6IE7

2010-08-20 12:45:41

IE6IE7Firefox

2010-09-16 13:17:31

IE6IE7IE8

2010-08-19 09:37:35

IE6fixed

2010-09-15 11:08:48

CSSIE6IE7
点赞
收藏

51CTO技术栈公众号