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或是 ...
随机推荐
- BootStrap入门教程 (三) ：可重用组件（按钮，导航，标签，徽章，排版，缩略图，提醒，进度条，杂项）
上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素,包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求. Bootstrap作为完整的前 ...
- Hadoop-Map/Reduce实现实现倒排索引
先来简单介绍一下什么是文档倒排索引 倒排索引是文档检索系统中最常见的数据结构,被广泛应用在全文搜索引擎上.主要用来存储某个单词(或词组)在一个文档或者一组文档中的存储位置的映射,即提供了一种根据内容来 ...
- hive-mysql安装配置
默认情况下,hive的元数据信息存储在内置的Derby数据中.Facebook将hive元数据存储在关系数据库 1.安装好mysql ,sudo apt-get install mysql-serve ...
- java的动态代理机制
前几天看到java的动态代理机制,不知道是啥玩意,然后看了看.死活不知道 invoke(Object proxy, Method m, Object[] args)种的proxy是个什么东西,放在这里 ...
- 应用数据存储到sdcard上一定要规范，android4.4.2有新规范
如果你的android设备有内部存储空间,即通常所说的机身存储(这就是指主要外部存储),那么你从外部插入SD卡就是一个二级外部存储设备. 最新的Android 4.4系统中,外置存储卡(SD卡)被称为 ...
- Spark RDD概念学习系列之RDD的重要内部属性（十五）
RDD的重要内部属性 通过 RDD 的内部属性,用户可以获取相应的元数据信息.通过这些信息可以支持更复杂的算法或优化. 1)分区列表:通过分区列表可以找到一个 RDD 中包含的所有分区及其所在地址. ...
- Homework-10 the Enhanced Version
经过一周对于JavaScript HTML语言等相关知识的学习,我终于基本完成了作业的要求,也是实现了我原先计划的第二部,推出了加强版的Homework-10 他由3个HTML组成,JS脚本直接选择嵌 ...
- 【转】关于Xcode的Other Linker Flags
链接器 首先,要说明一下Other Linker Flags到底是用来干嘛的.说白了,就是ld命令除了默认参数外的其他参数.ld命令实现的是链接器的工作,详细说明可以在终端man ld查看. 如果有人 ...
- jquery easyui中的formatter多用法
1.formatter能多数据进行格式化后输出,formatter必须返回一个字符串,第一个用法:当一个单元格的数据很多,不能显示完全时,鼠标放上去能动态显示出所有内容. formatter:func ...
- jQuery基础学习6——基本选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...