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或是 ...
随机推荐
- Android多媒体--MediaCodec的实例化方法
*由于作者水平限制,文中难免有错误和不恰当之处,望批评指正. *转载请注明出处:http://www.cnblogs.com/roger-yu/ MediaCodec的实例化方法主要有两种: 1.使用 ...
- Web Service 与 EJB 的分布式的区别
EJB的分布式:一个业务逻辑可能会调用分布在多台服务器上的 EJB 组件,但是这么多的组件调用必须纳入一个事务范围之中.也就是说如果需要调用三个 EJB 组件,第一个调用成功,第二个调用成功,但第三个 ...
- MySQL 大表优化方案探讨
当MySQL单表记录数过大时,增删改查性能都会急剧下降,可以参考以下步骤来优化: 单表优化 除非单表数据未来会一直不断上涨,否则不要一开始就考虑拆分,拆分会带来逻辑.部署.运维的各种复杂度,一般以整型 ...
- JavaSE聊天室
今天学习了一下简单聊天程序(类似QQ那种)的编写过程,从最初的0.1版本到最后的1.3版本,功能不断地增强,下面对一天的学习内容进行梳理. 版本0.1 我们的需求是显示一个窗体,其他什么也不用做,其他 ...
- HDU 5810 Balls and Boxes （找规律）
Balls and Boxes 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5810 Description Mr. Chopsticks is i ...
- nginx 502 错误
今天帮朋友处理一个程序报错,重启nginx服务之后,发现首页打不开了,但是静态文件可以打开 经检查nginx 服务器正常运行,重启无数次仍然502错误,考虑到静态文件可以打开,怀疑可能是php 脚本程 ...
- jQuery基础学习7——层次选择器find()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- C++中不常用关键字
mutable关键字 关键字mutable是C++中一个不常用的关键字,他只能用于类的非静态和非常量数据成员.我们知道一个对象的状态由该对象的非静态数据成员决定,所以随着数据成员的改变,对像的状态也会 ...
- corpus academic writing
http://micusp.elicorpora.info/ http://corpus.byu.edu/coca/ http://rcpce.engl.polyu.edu.hk/RACorpus/
- opennebula虚拟机启动失败
问题1 故障现象: Wed Jan :: [DiM][I]: New VM state is ACTIVE. Wed Jan :: [LCM][I]: New VM state is PROLOG. ...