转自:http://blog.csdn.net/hedong37518585/article/details/6638997
出现条件:
1、没有设置display:inline的块元素
2、浮动元素
3、设置了水平外边距(浮动的方向和水平外边距设置的方向一致)
4、元素与父容器之间
备注:因为浮动都有其相对应的对象,只有相对于其父容器的浮动才会出现这样的问题。第一个元素是相对父容器的,而第二个是相对第一个兄弟元素的,所以第二个浮动元素不会出现双倍水平外边距问题。而且只有设置水平外边距的值才会出现双倍外边距,垂直外边距没有关系。
解决办法:给浮动块框设置display:inline解决问题
下面是测试代码:
-
<!DOCTYPEhtml>
-
<html>
-
<head>
-
<metacharset="utf-8"/>
-
<title>IE6双倍水平外边距</title>
-
<style>
-
*{
-
margin:0;
-
padding:0;
-
}
-
.testbox{
-
background:#CCC;
-
width:100px;
-
height:100px;
-
margin:10px0010px;
-
float:left;
-
display:inline;/*去掉display:inline在IE6下看看效果*/
-
}
-
</style>
-
</head>
-
-
<body>
-
<divclass="testbox">IE6浮动双倍外边距</div><divclass="testbox">IE6浮动双倍外边距</div>
-
</body>
-
</html>
原因分析:这个现象仅当块框设置了浮动才会出现,行内框浮动不会出现此问题。因为行内框默认display:inline,给其float后自动就具有块框特性,所以如果是span之类的行内框,浮动后是不需要再单独设置display:inline就可以自动消除双倍水平外边距。
下面是测试代码:
-
<!DOCTYPEhtml>
-
<html>
-
<head>
-
<metacharset="utf-8"/>
-
<title>IE6双倍水平外边距</title>
-
<style>
-
*{
-
margin:0;
-
padding:0;
-
}
-
.testbox{
-
background:#CCC;
-
width:100px;
-
height:100px;
-
float:left;
-
margin:10px0010px;
-
}
-
</style>
-
</head>
-
-
<body>
-
<spanclass="testbox">IE6浮动双倍外边距</span><spanclass="testbox">IE6浮动双倍外边距</span>
-
</body>
-
</html>
总结一下:
如果默认的是块元素例如div之类的,在设置 float 后同时要置display:inline来解决IE6的双倍水平外边距;
如果默认是内联元素例如span之类的,那么浮动后是没有关系的,因其自身居右display:inline,所以不需要再重复添加该属性。
分享到:
相关推荐
所谓的IE6双倍边距就是指当元素有float属性,又有margin属性时,在IE6下面显示的margin的值是设置值的两倍。下面的代码: 折叠展开XML/HTML Code 复制代码代码如下: <div xss=removed> <div xss=removed></div> ...
IE6下出现双倍margin的解决方法,IE6下出现双倍margin的解决方法
margin值在IE6变成双倍 margin值在IE6变成双倍 margin值在IE6变成双倍
2、IE6双倍浮动BUG及解决办法 比如 复制代码代码如下: #div1 { float:left; margin-left:10px; width:200px; height:200px; border:1px solid red } 左margin边界设定为了10px,然后IE6却偏偏给你显示成双倍的20...
doctype html> 2、IE6在块元素、左右浮动、设定marin时造成margin双倍(双边距)解决方法:display:inline 3、以下三种其实是同一种bug,其实也不算是个bug,举个例子:父标签高度20,子标签11,垂直居中,20-11=9...
NULL 博文链接:https://helloklzs.iteye.com/blog/1305519
css兼容
2、IE6在块元素、左右浮动、设定marin时造成margin双倍(双边距) 解决方法:display:inline 3、以下三种其实是同一种bug,其实也不算是个bug,举个例子:父标签高度20,子标签11,垂直居中,20-11=9,9要分给文字...
IE Bug--浮动对象外补丁的双倍距离的解决方法
如果设这边距的这个元素同时设置了浮 动,那么浮动的这个方向如果有margin值的话,那么在ie6里面的实际距离是设置值的双倍。要解决这个问题不复杂,只要给这个元素加个 display:inline属性即可,但不建议这么
VMware虚拟化解决方案 一、项目研究内容 1.1 虚拟化的应用 随着企业的成长,IT部门必须快速地提升运算能力-以不同操作环境的新服务器形式 而存在。因此而产生的服务器数量激增则需要大量的资金和人力去运作,管理和...
IE6的双倍边距BUG IE6下绝对定位的容器内文本无法正常选择的问题 IE6下为什么图片下方有空隙产生 IE6下这两个层中间怎么有间隙 list-style-image无法准确定位的问题 LI中内容超过长度后以省略号显示的方法 web标准中...
相信大家对于常见 CSS BUG 的处理已经相对比较熟悉,例如:IE6 Three Pixel Gap(3px bug)、IE5/6 Doubled Float-Margin Bug(双倍边距的bug) 等等。但时常我们也会碰到复杂的 CSS CSSBUG在jb51.net介绍过也很多...
c#的3DES加密解密强制要求不能使用简单的密钥,这里按照3DES双倍长的算法原理,实现双倍长的加密解密
前两天看的《IE6 很邪恶,但我爱它的盒子模型》,我说盒子模型如何如何,面试官告诉我IE5的盒子模型有问题,不是IE6。 回来查查书,《Web标准实战》上说了,是IE5/Win的盒子模型有问题。看来CSS还是不够精通。 特...
HP多座席共享计算解决方案简单易行、价格经济,在帮助用户以同样的预算实现双倍PC体验,有效扩展计算资源。 借助HP多座席共享计算解决方案和Windows:registered: MultiPointTM Server2010,教育客户将充分体验到...
大四了,把之前学的些东西整理整理分享给大家,适合老师网页设计教材及初学者,里面包含了以下内容: 1、固定宽度CSS版式布局 2、自适应(弹性)宽度CSS版式布局 ... IE6双倍边距bug 4、盒模型层次平面示意图和3D示意图