IE6双倍边距问题及其解决方法

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的下边，因为浏览器解释样式表是从上至下的，如果两个样式有冲突，以下边的样式为准来显示。

IE6双倍边距问题及其解决方法相关推荐

防止IE6出现BUG的十种常见解决方法
以下介绍的十种解决方法是针对IE6经常会出现的DIV+CSS布局BUG而使用的一些默认设置,由于IE6的BUG比较多,所以我们制作页面时经常会碰到一些莫名其妙的布局问题,每次碰到问题我们就会查找对因的 ...
【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳
1:li边距"无故"增加任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑 ...
IE6 IE7 IE8 css bug兼容性解决方法总结归纳
转载自 http://blog.csdn.net/freshlover/article/details/7605207 1:li边距"无故"增加任何事情都是有原因的,li边距也不 ...
ie6 z-index不起作用的解决方法
一.概念 z-index伴随着层的概念产生的.网页中,层的概念与photoshop或是flash中层的概念是一致的.熟悉photoshop或是flash的应该知道,层级越高(图层越靠上),越在上面显示 ...
IE6/7 单选按钮 radio 无法选中解决方法
原文地址:http://blog.sina.com.cn/s/blog_74d6cedd0100ugih.html 今天在做一个页面,居然ff没问题,ie6/7上浏览的时候radio单选按钮不能被选中 ...
外边距合并及解决方法
外边距合并使用margin定义块元素的垂直外边距时,可能会出现外边距的合并. 相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素 ...
IE6下的text-indent属性BUG解决方法
在ie下.设置了text-indent:-999em;之后再给一堆诸如宽度背景图之类的顺属性,是不会被显示出来的. 加上一句 _display:block;就可以显示了. 具体请看连接~ http:/ ...
IE6的“错误：53 存储空间不足，无法完成此操作”解决方法
2019独角兽企业重金招聘Python工程师标准>>> 一法: 打开注册表,将"HKEY_CURRENT_USER\Software\Microsoft\Windows\C ...
浏览器css bug及bug解决方法
Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...

IE6双倍边距问题及其解决方法

IE6双倍边距问题及其解决方法相关推荐

最新文章

热门文章