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

如下文章转自网易 幸福镰刀 的博文

      今天作项目,由于在一个模块里有几十张的图片显示,原想用table布局可能会比较方便,没想到出现的问题竟让我一成天痛不欲生。最后我痛下一决定,之后坚定不能用table来布局,哪怕只是一小块模块, table它是表格也只能是表格。
如今来讲一下定位问题,问题的原因原本是想再图片上加一表现层,用来介绍图片的基本信息,效果以下:
 
(此处有图显示不出来,应该是咱们想要的正常显示了)
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_丁小怪
小结:
这是我我的遇到问题的一些总结,方法确定不仅我写的这两种,具体能够百度一下,说不定能够找到更多。以上两种,我更倾向于第一种方法来解决。在HTML中添加一些无心义的空标签是不太可靠的作法,会影响代码质量,除非找不到更好的解决BUG的办法,不然尽可能不要使用。
相关文章
相关标签/搜索