<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body,div{
 margin:0;
 padding:0;
}
#div1{
    width:200px;
 height:200px;
 background:#900;
 margin:20px 0 0 20px;
 float:left;
}
#div2{
 width:300px;
 height:200px;
 background:#009;
 margin:20px 0 0 20px;
 float:left;
}
</style>
</head>

<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>

上面这段代码，在IE6和FF中的显示结果分别如下图所示：

IE6：

FF：

可以看到，在IE6中显示的红色区域的左边距实际为40px，是CSS代码中设置的20px的两倍，这是IE6的双边距BUG。当满足下面这三个条件时，就会出现这个BUG：

1、要为块状元素；

2、要左侧浮动；

3、要有左外边距（margin-left）。

解决这个BUG，只需在相应的块状元素的CSS属性中加入“display:inline;”。

出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现。也就是说，并不是只有块状元素左浮动，且具有左外边距时才有这个BUG，当一个盒子右浮动的同时有一个向右的margin-right的时候，IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了，而且都有同方向的margin，则只有最靠近浮动方向的元素有双边距bug。

解决这个bug有两个方法：
1.给float的元素添加一个display：inline
2.给ie6写一个hack，其值是正常值的一半，即_margin-right:10px;这个方法不推荐，因为要加hack写法，而这个是要尽量避免写的。但是这个正好能够说明这个bug的真实存在。

本来以为，将display设置为inline后，就改变了BUG产生的条件之一，即必须是块状元素。但是后来又看到了下面这段话：“熟悉规则的人知道浮动元素自动设置为”block”元素，而不管他们之前是什么。这说明浮动元素上的{display: inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。”

ie6双边距bug及其解决办法的更多相关文章

  1. IE的双边距Bug以及解决办法

    display:inline和display:block区别 一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网 ...

  2. ie6双边距解决

    这个bug是ie6有名的双边距bug:同时为一个元素设置向一个方向偏移和对这个方向进行外边距设置,比如float:left,margin-left:45px;在其他浏览器下是显示正常的,在ie6下这个 ...

  3. IE6中浮动双边距bug

    想要创建出漂亮的网页设计, 除了要认真学习每一个html和CSS代码之外,不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气,因为你本来写出的规规矩矩的代码, 漂亮的设计就此就要完成了, ...

  4. 【转载】IE浏览器常见的9个css Bug以及解决办法

    IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让We ...

  5. IE双边距bug

    标准参考 根据 W3C CSS2.1 规范中的描述,对于非替换的浮动元素,若 'margin-left' 或 'margin-right' 特性的计算值为 'auto',则它们的实际使用值为 '0'. ...

  6. IE6 双倍距BUG

    IE6双倍距BUG的形成: 1.快元素 2.元素浮动 3.margin左右 解决方案:_display:inline;

  7. Dumpzilla工具第615行bug的解决办法

    Dumpzilla工具第615行bug的解决办法   在Dumpzilla使用选项frequency时,会提示SQL语法错误.这是由于其中SQL语句编写错误.需要将615行中: where url l ...

  8. 记CRenderTarget:DrawText()绘制中文乱码的BUG及解决办法

    原文:记CRenderTarget:DrawText()绘制中文乱码的BUG及解决办法 转载请注明出处:http://www.cnblogs.com/Ray1024 一.问题描述 在MFC中使用Dir ...

  9. ie6和ie7下z-index bug的解决办法

    一.匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述.这里就简单带过,z-index伴随着层的概念产生的.网页 中,层的概念与photoshop或是 ...

随机推荐

  1. .net组件技术

    .NET是什么? •.NET是一个平台,而不是一种语言. •.NET是Microsoft的用以创建XML Web服务(下一代软件)平台,该平台将信息.设备和人以一种统一的.个性化的方式联系起来.   ...

  2. 【hbase】使用thrift with python 访问HBase

    HBase 版本: 0.98.6 thrift   版本: 0.9.0 使用 thrift client with python 连接 HBase 报错: Traceback (most recent ...

  3. AspNetPager 的使用

    下面选用的是新闻发布系统里用的代码. SQL 存储过程: CREATE PROCEDURE procNewsSelectByPager @startRecordIndex int, @endRecor ...

  4. linux socket中的SO_REUSEADDR

    Welcome to the wonderful world of portability... or rather the lack of it. Before we start analyzing ...

  5. av_interleaved_write_frame 网络不好的情况下返回较慢

    用libvlc做直播推流引擎在网络较差的情况下,需要关闭直播,并且重新开播.这个过程中,推流引擎重启,需要的是快速响应.实际上测试结果发现,经常会发生引擎关闭接口卡住.后来跟踪代码,定位到s_rtmp ...

  6. java assert的用法简介

    assert的基本用法 assertion(断言)在软件开发中是一种常用的调试方式,很多开发语言中都支持这种机制,如C,C++和Eiffel等,但是支持的形式不尽相同,有的是通过语言本身.有的是通过库 ...

  7. 关于CoreData和SQLite多线程访问时的线程安全问题

    数据库读取操作一般都是多线程访问的.在对数据进行读取时,我们要保证其当前状态不能被修改,即读取时加锁,否则就会出现数据错误混乱.IOS中常用的两种数据持久化存储方式:CoreData和SQLite,两 ...

  8. POJ1328Radar Installation（贪心）

    对于每一个点,可以找到他在x轴上的可行区域,这样的话就变为了对区间的贪心. #include<iostream> #include<stdio.h> #include<s ...

  9. Java Thread Basic

    一.Java的多线程有三种实现方式. 1.继承创建. a.定义子类,重写run方法 b.创建Thread子类的实例(即现成对象) c.调用start() 方法启动现成 特征:不可以共享变量. publ ...

  10. 套题 Codeforces Round #277 (Div. 2)

    A. Calculating Function 水题,分奇数偶数处理一下就好了 #include<stdio.h> #include<iostream> using names ...