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

最新推荐文章于 2019-12-24 16:13:14 发布

Oo小鱼儿

最新推荐文章于 2019-12-24 16:13:14 发布

阅读量1.7k

点赞数

分类专栏： For IE 文章标签： IE6 双倍边距

For IE 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

Oo小鱼儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE6双倍边距问题及其解决方法

IE6双倍边距在网页布局中是一个很常见的问题，网上关于IE6双倍边距的问题讨论很多，但大多比较笼统，一般认为在块元素(比如div)中同时出现flaot和margin两个样式时就会在IE6中产生双倍边距，写这篇文章的目的，就是把这个问题讨论得透彻一些，让大家明白，到底在什么样的条件下才会出现双倍边距问题。　　以下是源代码：> html xmlns="http://www.w3.org/1
复制链接

扫一扫

专栏目录