ie6双边距bug及其解决办法
<!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>无标题文档</title>
<style type="text/css">
body,div{
margin:0;
padding:0;
}
#div1{
width:200px;
height:200px;
background:#900;
margin:20px 0 0 20px;
float:left;
}
#div2{
width:300px;
height:200px;
background:#009;
margin:20px 0 0 20px;
float:left;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
上面这段代码，在IE6和FF中的显示结果分别如下图所示：
IE6：
FF：
可以看到，在IE6中显示的红色区域的左边距实际为40px，是CSS代码中设置的20px的两倍，这是IE6的双边距BUG。当满足下面这三个条件时，就会出现这个BUG：
1、要为块状元素；
2、要左侧浮动；
3、要有左外边距（margin-left）。
解决这个BUG，只需在相应的块状元素的CSS属性中加入“display:inline;”。
出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现。也就是说，并不是只有块状元素左浮动，且具有左外边距时才有这个BUG，当一个盒子右浮动的同时有一个向右的margin-right的时候，IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了，而且都有同方向的margin，则只有最靠近浮动方向的元素有双边距bug。
解决这个bug有两个方法：
1.给float的元素添加一个display：inline
2.给ie6写一个hack，其值是正常值的一半，即_margin-right:10px;这个方法不推荐，因为要加hack写法，而这个是要尽量避免写的。但是这个正好能够说明这个bug的真实存在。
本来以为，将display设置为inline后，就改变了BUG产生的条件之一，即必须是块状元素。但是后来又看到了下面这段话：“熟悉规则的人知道浮动元素自动设置为”block”元素，而不管他们之前是什么。这说明浮动元素上的{display: inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。”
ie6双边距bug及其解决办法的更多相关文章
- IE的双边距Bug以及解决办法
display:inline和display:block区别 一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网 ...
- ie6双边距解决
这个bug是ie6有名的双边距bug:同时为一个元素设置向一个方向偏移和对这个方向进行外边距设置,比如float:left,margin-left:45px;在其他浏览器下是显示正常的,在ie6下这个 ...
- IE6中浮动双边距bug
想要创建出漂亮的网页设计, 除了要认真学习每一个html和CSS代码之外,不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气,因为你本来写出的规规矩矩的代码, 漂亮的设计就此就要完成了, ...
- 【转载】IE浏览器常见的9个css Bug以及解决办法
IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让We ...
- IE双边距bug
标准参考 根据 W3C CSS2.1 规范中的描述,对于非替换的浮动元素,若 'margin-left' 或 'margin-right' 特性的计算值为 'auto',则它们的实际使用值为 '0'. ...
- IE6 双倍距BUG
IE6双倍距BUG的形成: 1.快元素 2.元素浮动 3.margin左右 解决方案:_display:inline;
- Dumpzilla工具第615行bug的解决办法
Dumpzilla工具第615行bug的解决办法 在Dumpzilla使用选项frequency时,会提示SQL语法错误.这是由于其中SQL语句编写错误.需要将615行中: where url l ...
- 记CRenderTarget:DrawText()绘制中文乱码的BUG及解决办法
原文:记CRenderTarget:DrawText()绘制中文乱码的BUG及解决办法 转载请注明出处:http://www.cnblogs.com/Ray1024 一.问题描述 在MFC中使用Dir ...
- ie6和ie7下z-index bug的解决办法
一.匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述.这里就简单带过,z-index伴随着层的概念产生的.网页 中,层的概念与photoshop或是 ...
随机推荐
- j2ee的十三个规范
转载 今天在做连接oracle数据库的时候,感受到了什么是规范.平时听到别人说学习j2ee一定要学习他的十三个规范,大概的知道每个规范是做什么的,每个“接口”是做什么的. 很早就听过 ...
- unix文件权限
一.UNIX下关于文件权限的表示方法和解析 SUID 是 Set User ID, SGID 是 Set Group ID的意思. UNIX下可以用ls -l 命令来看到文件的权限.用ls命令所得到的 ...
- UVA 796 - Critical Links （求桥）
Critical Links In a computer network a link L, which interconnects two servers, is considered criti ...
- 四轴飞行diy全套入门教程（从最基础的开始）
转载:http://www.cnmox.com/thread-12460-1-1.html首先声明本人也是菜鸟,此教程就是从一个菜鸟的角度来讲解,现在论坛上的帖子都突然冒很多名词出来,又不成体系,我自 ...
- AutoCAD.NET二次开发：创建自定义菜单的两种方法比较
目前我已经掌握的创建CAD菜单方法有两种: COM方式: http://www.cnblogs.com/bomb12138/p/3607929.html CUI方式: http://www.cnblo ...
- (hzau)华中农业大学第四届程序设计大赛网络同步赛 G: Array C
题目链接:http://acm.hzau.edu.cn/problem.php?id=18 题意是给你两个长度为n的数组,a数组相当于1到n的物品的数量,b数组相当于物品价值,而真正的价值表示是b[i ...
- 在ASP.NET MVC中的四大筛选器（Filter）及验证实现
http://www.cnblogs.com/artech/archive/2012/08/06/action-filter.html http://www.cnblogs.com/ghhlyy/ar ...
- 设计模式-结合Android代码
开始学设计模式 1 单例模式 单例模式可以说是最容易理解的模式了,也是应用最广的模式之一,先看看定义吧. 定义:确保单例类只有一个实例,并且这个单例类提供一个函数接口让其他类获取到这个唯一的实例. 什 ...
- 深入Mysql 导入导出
mysql常用导出数据命令:1.mysql导出整个数据库 mysqldump -hhostname -uusername -ppassword databasename > backupfil ...
- developer tools access 需控制另一进程才能继续调度 ？
解决方法:id -a会看到 204(_developer)再输入命令 sudo dscl . append /Groups/_developer GroupMembership 204,会提示输入密码 ...