解决IE6下margin双倍边距问题

开发 前端
IE6下margin双倍边距问题你是否遇到过?那么你知道它的解决方法吗?这里向大家分享一下IE6下margin双倍边距的产生以及解决方法。

本文向大家描述一下解决IE6下margin双倍边距问题的方法,首先让我们来看一下问题的产生。

解决IE6下margin双倍边距问题

问题:

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

解决办法:

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

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

当然最坏的情况下,我们就可以使用"margin:10px0010px;_margin:10px005px",这种“标准属性;_IE6识别属性”HACK方式解决。

◆注意:

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

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/linkaisheng/archive/2010/04/24/5522487.aspx

【编辑推荐】

  1. CSS margin-bottom 属性使用手册
  2. IE6.0对padding的解读分析
  3. DIV+CSS网页错位诊断和解决方法
  4. 深入学习CSS中padding、margin属性写法
  5. 技术分享 如何使用CSS控制超链接文字样式
责任编辑:佚名 来源: csdn.net
相关推荐

2010-08-27 09:02:22

IE6margin双倍

2010-08-25 11:36:19

IE6margin

2010-08-19 10:01:19

IE6margin

2010-08-27 13:31:58

IE6IE7Firefox

2010-08-19 09:29:26

hoverIE6

2010-08-19 10:13:25

marginFFIE6

2010-08-26 12:59:29

marginCSS

2010-08-19 15:04:26

IE6DIV

2010-09-15 14:22:05

IE6position

2010-08-19 14:43:49

IE6IE7IE8

2010-08-19 10:40:36

position:fiIE6

2010-09-15 14:14:29

IE6position

2010-08-18 09:24:09

IE6兼容性

2010-10-08 16:31:08

AjaxIE6

2010-08-27 15:08:10

FirefoxIE6IE7

2010-08-25 10:10:30

CSSmargin

2010-09-08 09:11:32

CSSmargin

2010-09-15 08:41:25

IE6IE7Firefox兼容

2009-08-14 09:20:40

抵制IE6

2010-08-19 14:19:12

IE6IE7IE8
点赞
收藏

51CTO技术栈公众号