CSS中margin常见问题解决方案

开发 前端
本文向大家介绍一下CSS中margin常见问题及解决方案,常见的问题主要包括IE6下双边距问题,margin重叠的问题,以及margin不起作用的情况等。

margin为CSS中非常常用的一个属性,其所包含的内容也是很多的,这里向大家描述一下CSS中margin常见问题及解决方案。

CSS 中margin属性常见问题

1.IE6下双边距问题

margin双布局可以说是IE6下经典的bug之一。产生的条件是:block元素+浮动+margin。

还记得我自认为会CSS的那个阶段,这个问题我经常碰到,会很熟练的用hack解决这个问题,当时还自以为是,洋洋得意。现在看来,当时的自己嫩的就像个豆芽菜。真正CSS厉害的人基本上是不会碰到这个bug的,如果您时不时遇到这个bug,说明您的CSS还有好一段路要走。
我的体会是越少的浮动,就会越少的代码,会有更灵活的页面,会有扩展性更强的页面。这不多说,归结为到一定水平了,浮动会用的较少。另外,您也会避免使用浮动+margin的用法。所以,越后来越不易遇到这种bug。

这里提一下解决方法,使用hack我是不推荐的,使用hack属于比初学者稍高一点的层次水平。一个页面,没有一个hack,但是各个浏览器下表现一致,这才是水平。使用display:inline;可以解决这个问题。

而为什么display:inline可以解决这个双边距bug,首先是inline元素或inline-block元素是不存在双边距问题的。然后,float:left等浮动属性可以让inline元素haslayout,会让inline元素表现得跟inline-block元素的特性一样,支持高宽,垂直margin和padding等,所以divclass的所有样式可以用在这个displayinline的元素上。

如果您是IE6浏览器,可以狠狠地点击这里进入demo实例页面了解更多信息

2.margin重叠的问题

CSS2.0规范对margin重叠有如下的描述:

1.水平边距永远不会重合。

2.垂直边距可能在特定的框之间重合:

◆常规流向中两个或多个块框相邻的垂直边距会重合。结果的边距宽度是相邻边距宽度中较大的值。如果出现负边距,则在最大的正边距中减去绝对值最大的负边距。如果没有正边距,则从零中减去绝对值最大的负边距。

◆在一个浮动框和其它框之间的垂直边距不重合。//这句话是不够严谨,在IE浏览器下确实如此,但是Firefox等浏览器下依旧重合。

◆“绝对定位的框”与“相对定位的框”边距不重合。//这句话有待斟酌,我在Firefox等浏览器下测试,效果貌似很糟糕的。

margin重叠的问题其实并不是经常遇到,有时即使遇到造成的影响也很小,或是通过其他一些修改就可以轻松解决这个问题了。我也是今天才好好的研究了下margin重叠的问题,当重叠较多时,没有找到什么好的方法解决这个问题,要不IE浏览器依旧顽固不化,要么Firefox表现差强人意。可以自己后来又一想,既然知道会发生margin重叠,写代码的时候势必会注意的,也就不会出现这些重叠的问题的,所以绞尽脑汁想一个比较完美的解决方法是没有必要的。最好的解决margin重叠问题的方法就是了解它,避免它。

每枚硬币都有正反面,其实margin重叠也是又它的用处的。当垂直方向上有多个模块时,margin重叠正好可以让上中下都有一个margin值,而且由于margin重叠,所以margin值的表现都是一样的。例如a,b,c三个垂直方向上的模块都有margin:10px0;则最后的表现结果是(如果其上下没有浮动元素干扰的话):上,中上,中下,下四处有10像素的间距。正好完美定位。

关于margin重叠,我写了个demo实例页面,您可以狠狠地单击这里获取更多有用的些信息,包括些解决重叠问题的方法等。

3.margin不起作用的情况

margin不起作用多出现在Firefox浏览器下,最常见的原因就是浮动影响,还是就是margin重叠,或者是padding与margin的重叠。关于这个,我就指说这么多了。因为margin不起作用,可以使用padding代替,或者再添加一层标签等方法解决,不太难,没有多少可说的。

【编辑推荐】

  1. CSS元素水平居中行之有效的办法
  2. IE6.0对padding的解读分析
  3. CSS样式表高效使用八大秘诀
  4. CSS类选择器class用法探究
  5. IE6中常见CSS兼容性解决十大技巧
责任编辑:佚名 来源: css3-html5.com
相关推荐

2010-08-04 10:20:30

Flex组件开发

2019-04-04 13:11:37

React内存泄露memory leak

2021-08-20 15:49:13

电脑主板维修

2010-08-26 08:45:32

margin:0pxa

2010-09-07 09:08:03

DIV弹出层

2009-12-24 11:13:41

2010-09-13 17:15:59

margin-top

2010-08-26 13:24:15

CSSmargin

2011-01-21 14:13:10

2010-01-05 10:02:56

LinuxRAID常见问题

2010-08-31 16:09:04

DIV+CSS

2010-08-26 14:00:28

CSSmargin

2010-08-26 10:56:16

CSStextarea

2010-04-28 19:24:17

Hp unix

2010-08-30 12:46:42

DIV+CSS

2012-05-09 10:08:41

跨机房

2011-07-28 11:28:21

SQL Server数注册表编辑器

2010-08-23 14:06:57

DIV+CSS

2019-10-08 16:05:19

Redis数据库系统

2010-03-30 16:04:34

Linux Nginx
点赞
收藏

51CTO技术栈公众号