IE的绝对定位缺陷及修复方案

Large | Medium | Small
gently , Mar/3/20:43 , UI , Comments(1) , Trackbacks(0) , Reads(711) , From Original
这个问题出现在一个网站页面的布局上,因为左侧的背景阴影与其顶部的flash对接时,使用传统的float总是无法完美实现,要么歪了一点,要么出现一条缝隙,于是我决定用绝对定位(position:absolute)来解决它,问题就出现了:当我将左侧边栏绝对定位,理论上应该是位于父容器的左侧,可是在IE下预览的时候,它似乎跑到了中间,以下是重现问题的代码:

以上代码中FF等标准浏览器显示正常,也是我们预想的结果,我要的结果;而在IE下就变了样了,非常严重的变形了。
苦苦思索,始终没有解决,开始还以为是代码错误写错了,后来在群里求助,有经验的告诉了我方法——就是将父容器相对定位,然后将#left的left设置为0,看修正后的代码:

通过以上的代码成功解决的IE和FF的显示差异,问题算是解决了,不过我还是没有弄懂为什么要这么做,也许对CSS的盒子模型还是一知半解吧,啊,等过些天有时间弄明白了再来update吧,现在是忙的屁股都疼,跟闲的蛋疼是两个境界。

这里先收藏几篇关于盒子模型的文章,日后方便检索:

1.彻底弄懂CSS盒子模式一(DIV布局快速入门)

2.彻底弄懂CSS盒子模式二(导航栏实例)

3.彻底弄懂CSS盒子模式三(浮动的表演和清除的自述)

4.彻底弄懂CSS盒子模式四(绝对定位和相对定位)

5.彻底弄懂CSS盒子模式五(定位强化练习)  


=========update at 2008-3-6 14:32:55================

看了以上的几篇文章,并且与其相关联的文章也翻了一遍,了解了父容器相对定位与子容器的绝对定位的配合是定位里面的一个技巧,再折服一下gemini,这都知道!呵呵~
tomi Email Homepage
03/06/2008 10:49
以后多交流新朋友:)
gently replied on 03/06/2008 14:23
嗯!
Pages: 1/1 First page 1 Final page
Add a comment
Emots
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
Enable HTML
Enable UBB
Enable Emots
Hidden
Remember
Nickname   Password   Optional
Site URI   Email   [Register]