一句话解决IE6浮动产生双边距的办法-控件新闻-慧都网

产品

产品
资讯
资源
视频
学院
示例

一句话解决IE6浮动产生双边距的办法

原创|其它|编辑：郝浩|2009-03-09 17:01:02.000|阅读 2640 次

概述：在一个容器里面放入多个并行排列的容器是我们在作新闻列表或者图片列表中常用的办法，通常是算好大小，设置好MARGIN的距离，然后使用float 即可实现。这是非常简单有效的代码，但是偏偏IE6会出现错位的现象，Firefox和IE7 IE8都没问题。这个IE6的问题就是通常说的：IE6浮动产生双边距的BUG

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

在一个容器里面放入多个并行排列的容器是我们在作新闻列表或者图片列表中常用的办法，通常是算好大小，设置好MARGIN的距离，然后使用float 即可实现。这是非常简单有效的代码，但是偏偏IE6会出现错位的现象，Firefox和IE7 IE8都没问题。这个IE6的问题就是通常说的：IE6浮动产生双边距的BUG；

看下面产生BUG的代码，请用IE6看，注意左边的距离

HTML代码

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

在IE6下面，红色的容器并没有按我们想象的去排列，这就是产生双倍距离的问题。

这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间，在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样，双倍边界同样神秘地显示在居右的相同方式。

解决办法很简单，就是在红色容器的CSS加入 display:inline 属性

 程序代码
.bb{width:240px;height:240px;float:left;margin:10px 0 0 10px; background-color:#ff0000;display:inline;}

看效果：

HTML代码

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

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：本站

上一篇：AJAX中四种外部数据格式比较下一篇：几种常见的网页圆角半完美解决方案

在线采购

中文文档库

试用/Demo下载

开发社群

一句话解决IE6浮动产生双边距的办法

用科技创就卓越

Create excellence with technology

在线采购

中文文档库

试用/Demo下载

开发社群

一句话解决IE6浮动产生双边距的办法

为你推荐

用科技创就卓越

Create excellence with technology