今天做项目,因为在一个模块里有几十张的图片显示,原想用table布局可能会比较方便,没想到出现的问题竟让我一整天痛不欲生。最后我痛下一决定,以后坚决不能用table来布局,哪怕只是一小块模块,table只是表格,也只能是表格。
现在来说一下定位问题,问题的缘由本来是想再图片上加一表现层,用来介绍图片的基本信息,效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/5d88607265b2519ef6f372b5bbef4aa5.jpeg)
Firefox、IE8
现在我们再来看看,IE6跟IE7这两辆老爷车的表现:
![](https://i-blog.csdnimg.cn/blog_migrate/28d7dc2e65d10d3dd4072306fe4b14cb.jpeg)
其实这个原因是因为IE6/IE7的解析是在position:absolute之后,仍然会按照普通文档流的解析来进行,而要打破这种方式,让它正常工作就需要给它一个定位,具体代码如下:
方法一:
CSS:
![](https://i-blog.csdnimg.cn/blog_migrate/b3e57347859160f385f2e2fdfdce0cd8.jpeg)
html代码:
![](https://i-blog.csdnimg.cn/blog_migrate/5f44e6e020ad8cd67891de801dd02f54.jpeg)
切记left:0px;必须两个都要写,少写一个都会造成不显示:
![](https://i-blog.csdnimg.cn/blog_migrate/71a9c7f7b4336be0d3ecdc6161350d43.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/c6dd285d60c60f34b07ee1f37eb405e3.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/3c9a35f5b00385b09a0a028cffcfa7aa.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/0db805f7a7dea7e0a76b84e483079de0.jpeg)
小结:
这是我个人遇到问题的一些总结,方法肯定不只我写的这两种,具体可以百度一下,说不定可以找到更多。以上两种,我更倾向于第一种方法来解决。在HTML中添加一些无意义的空标签是不太可靠的做法,会影响代码质量,除非找不到更好的解决BUG的办法,否则尽量不要使用。