IE6双倍边距在网页布局中是一个很常见的问题,网上关于IE6双倍边距的问题讨论很多,但大多比较笼统,一般认为在块元素(比如div)中同时出现flaot和margin两个样式时就会在IE6中产生双倍边距,写这篇文章的目的,就是把这个问题讨论得透彻一些,让大家明白,到底在什么样的条件下才会出现双倍边距问题。
以下是源代码:
- <!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>ie6双倍边距</title>
- </head>
- <body>
- <div style="background:red; height:120px;">
- <div style="width:100px; height:100px; background:green; margin:10px; float:left;"></div>
- <div style="width:100px; height:100px; background:blue; margin:10px; float:left;"></div>
- </div>
- </body>
- </html>
以下分别是IE6和IE7的显示效果:
IE6显示效果
IE7显示效果
大家看到了,IE7显示正常,而IE6中绿色背景那个div左边距是20px,蓝色背景那个div显示正常,这说明什么问题呢?
我们再做个试验,将两个div的float:left改成float:right,以下分别是IE6和IE7的显示效果:
IE6显示效果
IE7显示效果
大家看明白了吧,下边我们做出结论:
1、当一个或多个并列的块元素同时应用了margin-left和float:left两个样式,IE6中左边第一个块元素的左边距是设置值的2倍;
2、当一个或多个并列的块元素同时应用了margin-right和float:right两个样式,IE6中右边第一个块元素的右边距是设置值的2倍;
3、块元素默认前后都有换行,float的目的是消除块元素的前后换行,让并列的块元素显示在一条线上,当并列的块元素显示在一条线上时,双倍边距只影响左边或右边第一个块元素,而如果因为其他原因(比如宽度超出最大宽度块元素出现换行),双倍边距影响每一行左边或右边第一个块元素。
IE6中块元素产生双倍边距的原因我们搞清楚了,那么怎么让IE6和IE7及其他浏览器显示一致呢,方法很简单,就是给受双倍边距影响的块元素单独设置样式,_margin-left或_margin-right,其值是正常显示值的一半,这个样式只有IE6可以解释,这样在IE6中产生双倍边距,正好是我们想要的效果。注意这两个样式前的下划线,另外就是这两个样式一定要放在正常样式margin-left和margin-right的下边,因为浏览器解释样式表是从上至下的,如果两个样式有冲突,以下边的样式为准来显示。