IE6/IE7下position:absolute;绝对定位偏移、不显示问题  

2012-05-23 01:25:35|  分类: 默认分类 |  标签:ie7绝对定位不显示  ie6绝对定位不显示  ie6position:absolute  ie6绝对定位偏移  html   |字号 订阅

今天做项目,因为在一个模块里有几十张的图片显示,原想用table布局可能会比较方便,没想到出现的问题竟让我一整天痛不欲生。最后我痛下一决定,以后坚决不能用table来布局,哪怕只是一小块模块, table它是表格也只能是表格。
现在来说一下定位问题,问题的缘由本来是想再图片上加一表现层,用来介绍图片的基本信息,效果如下:
IE6/IE7下position:absolute;绝对定位偏移、不显示问题 - 幸福镰刀 - HTML5_丁小怪
Firefox、IE8
现在我们再来看看,IE6跟IE7这两辆老爷车的表现:
IE6/IE7下position:absolute;绝对定位偏移、不显示问题 - 幸福镰刀 - HTML5_丁小怪
其实这个原因是因为IE6/IE7的解析是在position:absolute之后,仍然会按照普通文档流的解析来进行,而要打破这种方式,让它正常工作就需要给它一个定位,具体代码如下:
方法一:
  CSS:
  IE6/IE7下position:absolute;绝对定位偏移、不显示问题 - 幸福镰刀 - HTML5_丁小怪
html代码:
IE6/IE7下position:absolute;绝对定位偏移、不显示问题 - 幸福镰刀 - HTML5_丁小怪
 
切记 left:0px;必须两个都要写,少写一个都会造成不显示:
IE6/IE7下position:absolute;绝对定位偏移、不显示问题 - 幸福镰刀 - HTML5_丁小怪 IE6/IE7下position:absolute;绝对定位偏移、不显示问题 - 幸福镰刀 - HTML5_丁小怪
 
 
 方法二:
IE6/IE7下position:absolute;绝对定位偏移、不显示问题 - 幸福镰刀 - HTML5_丁小怪 IE6/IE7下position:absolute;绝对定位偏移、不显示问题 - 幸福镰刀 - HTML5_丁小怪
小结: