ddc
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
网站建设 域名注册 网站建设 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计 虚拟主机 域名注册 acg王国 ACG玩家 品牌设计 上海网站建设
求创科技
网站建设
中国互联
素材出售
中国设计秀
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> IE双倍边距BUG的现象及解决办法

IE双倍边距BUG的现象及解决办法 (1)

来源:中国设计秀    作者:w3cui    点击:259     加入收藏

       最近有很多人问我:在IE6下设置了几个标签的float和margin属性,但左边距明明设的是5px,怎么出来后就变成了10px,而在FireFox下就,没问题。在解释了这是典型的IE6的双倍边距BUG的现象之一后,并帮助那位朋友解决了问题。

       其实,IE6的双倍边距BUG也常常是捆扰初学者的一个难题。下面我总结一下此BUG的现象和解决办法。

第一种,也是最常见的一种就是上面说到的,设置了浮动(float)后再设置外边距(margin),外边距就会是原来值的2倍。请看下面的代码:


        
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

       1、问题:从上面例子中“margin:10px 0 0 10px”可以看出,上边距和左边距同样为10px,但第一个对象距左边有20px。

       2、解决办法:当将其display属性设置为inline时问题就都解决了。

       3、说明:这是因为块级对象默认的display属性值是block,当设置了浮动的同时,还设置了它的外边距就会出现这种情况。也许你会问:“为什么第二个对象和第一个对象之间就不存在双倍边距的BUG”?因为浮动都有其相对应的对象,只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的,而第二个对象是相对第一个对象的,所以第二个对象在设置后不会出现问题。

       4、总结:这个现象仅当块级对象设置了浮动属性后才会出现,内联对象(行级对象)不会出现此问题。并且只有设置左边距和右边距的值才会出问题,上下边距不会出现问题。

       第二种,也是比较常见的一种。当对象1设置了左浮动,对象2在不设置取消浮动的情况下会浮在对象1的右边。但当对象2不设置浮动时,二者之间会出现空隙。请看下面的代码:


        
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

 

0
顶一下
[1] [2]
2008-05-18 13:04:58    出处:w3cui.org
Google
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口