问题:在IE6下如果某个标签使用了float属性,同时设置了其外补丁“margin:10px 0 0 10px”可以看出,上边距和左边距同样为10px,但第一个对象距左边有20px。

解决办法

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

说明:这是因为块级对象默认的 display属性值是block,当设置了浮动的同时,还设置了它的外边距就会出现这种情况。也许你会问:“为什么第二个对象和第一个对象之间就不存在 双倍边距的BUG”?因为浮动都有其相对应的对象,只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的,而第二个对象是相对第一 个对象的,所以第二个对象在设置后不会出现问题。另外在一些特殊布局中,可能需要组合使用display:block;和display:inline; 才能达到预期效果。
当然最坏的情况下,我们就可以使用"margin:10px 0 0 10px;_margin:10px 0 0 5px",这种“标准属性;_IE6识别属性”HACK方式解决。

注意:这个现象仅当块级对象设置
了浮动属性后才会出现,内联对象(行级对象)不会出现此问题。并且只有设置左边距和右边距的值才会出问题,上下边距不会出现问题。使用
display:inline方法仅限于使用float时使用,否则显示会出现问题。多个子块在父块中使用float时,同行显示的多个子块只需要第一个
使用display:inline

方法二

可以使用以下办法来书写兼容浏览器的css代码:

第一种

  1. :.div{
  2. background:orange;/*ff*/
  3. *background:green!important;/*ie7*/
  4. *background:blue;/*ie6*/
  5. }

第二种

  1. :.div{
  2. margin:10px;/*ff*/
  3. *margin:15px;/*ie7*/
  4. _margin:15px;/*ie6*/
  5. }

第三种

  1. :#div{color:#333;}/*ff*/
  2. *html#div{color:#666;}/*IE6*/
  3. *+html#div{color:#999;}/*IE7*/

IE6双倍margin间距解决方案的更多相关文章

  1. IE6双倍margin间距解决方法

    虽然现在很少有人在用ie6了,但作为前端人员,是不的不面对的问题. 在ie6中,使用float后的元素,在margin—left,这是你会发现距离和你想的不一样,其他的浏览器又是正常的,增大margi ...

  2. css ie6双倍margin现象

    IE6双倍margin bug 当出现连续浮动的元素,携带和浮动方向相同的margin时,队首的元素,会双倍marign. 解决方案: 1)使浮动的方向和margin的方向,相反. 所以,你就会发现, ...

  3. IE6下margin时,float浮动产生双倍边距

    今天遇到了一个IE6下的兼容性问题,虽然IE6已经不被大众所期待了,用户也已基本上消失的所剩无几,但是,作为一个问题而存在,我们有必要尝试的去研究一下bug的改善方法 对元素float-left,然后 ...

  4. IE6 双倍距BUG

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

  5. 【IE6双倍边距】-IE6双倍边距的bug

    效果 代码 CSS IE6双倍边距的bug body { margin: 0; padding: 0; } .div1 { width: 200px; height: 200px; backgroun ...

  6. 解决IE6双倍边距BUG

    解决IE6双倍边距BUG,只要满足下面3个条件才会出现这个BUG: 1)要为块状元素; 2)要左侧浮动; 3)要有左外边距(margin-left); 解决这个BUG很容易,只需要在相应的块状元素的C ...

  7. inline-block元素的4px空白间距解决方案

    http://www.jb51.net/css/68785.html  inline-block元素的4px空白间距解决方案 

  8. inline元素和inline-block元素的4px空白间距解决方案

    实在不想写了,要吐了,看到一篇讲的比较全的文章,直接粘链接了 inline元素和inline-block元素的4px空白间距解决方案 出自脚本之家

  9. IE6 margin 双倍边距解决方案

    一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度.要实 ...

随机推荐

  1. ORACLE中STATUS为INACTIVE但是SERVER为SHARED状态的会话浅析

    我们知道当ORACLE数据库启用共享服务器模式时,通过共享服务器模式连接到数据库的会话是有一些特征的.在v$session里面,其SERVER的状态一般为SHARED和NONE, 为SHARED时,表 ...

  2. java List<Item> its=new ArrayList<Item>(); Map按value中的某字段排序

    public List<Item> getAllItem(){ Map<Long, Item> itemDic = new HashMap<Long, Item>( ...

  3. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

  4. BZOJ1057 [ZJOI2007]棋盘制作

    Description 国际象棋是世界上最古老的博弈游戏之一,和中国的围棋.象棋以及日本的将棋同享盛名.据说国际象棋起源 于易经的思想,棋盘是一个8*8大小的黑白相间的方阵,对应八八六十四卦,黑白对应 ...

  5. Oracle数据库五种约束

    oracle 数据库 数据表的5个约束类型:1.主键约束2.外键约束3.唯一约束4.检查约束5.非空约束 主键约束:用来唯一标示表中的一个列,一个表中的主键约束只能有一个,但是可以在一个主键约束中包含 ...

  6. C#Random()函数详解

    随机数的使用很普遍,可用它随机显示图片,用它防止无聊的人在论坛灌水还可以用来加密信息等等.本文讨论如何在一段数字区间内随机生成若干个互不相同的随机数,比如在从1到20间随机生成6个互不相同的整数,并通 ...

  7. CodeChef November Challenge 2014

    重点回忆下我觉得比较有意义的题目吧.水题就只贴代码了. Distinct Characters Subsequence 水. 代码: #include <cstdio> #include ...

  8. 对象创建型模式------Abstract Factory(抽象工厂)

    1. 意图    提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类.2. 别名    Kit3. 动机        假设我们要开发一款游戏,当然为了吸引更多的人玩,游戏难度不能太大 ...

  9. Android中数据库的操作流程详解

    Android中数据库的操作方法: 1.Android平台提供了一个数据库辅助类来创建或打开数据库. 这个辅助类继承自SQLiteOpenHelper类.继承和扩展SQLiteOpenHelper类主 ...

  10. 将Excel上千条数据写入到数据库中

    简要说明:因工作需要,需要一张Excel表格中的所有数据导入到数据库中.如下表,当然这只是一部分,一共一千多条. 前期处理: 首先要保证上图中的Excel表格中的数据不能为空,如果有为空的数据,可以稍 ...