一、ie6下的双倍外边距问题
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
}
很简单,对吧?但是当我们在IE6中查看时,会发现左侧外边距100像素,被扩大到200个像素。
二、怎么会这样?
说实话,这个原因还真是不清楚。但是这样的结果确确实实在IE6中出现了。而且这种情况出现的条件是当浮动元素的浮动方向和浮动边界的方向一致时才会出现。如同上面的例子一样,元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理,元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素,第一个浮动元素会出现这个双边距bug,其它的浮动元素则不会。
三、如何修正这个Bug?
很简单,只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单?对,就这么简单。
CSS代码如下:
以下为引用的内容:
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}
转自:http://blog.sina.com.cn/s/blog_6aadfb2a0100nuiy.html
分享到:
相关推荐
IE6下出现双倍margin的解决方法,IE6下出现双倍margin的解决方法
margin值在IE6变成双倍 margin值在IE6变成双倍 margin值在IE6变成双倍
所谓的IE6双倍边距就是指当元素有float属性,又有margin属性时,在IE6下面显示的margin的值是设置值的两倍。下面的代码: 折叠展开XML/HTML Code 复制代码代码如下: <div xss=removed> <div xss=removed></div> ...
css兼容
如果设这边距的这个元素同时设置了浮 动,那么浮动的这个方向如果有margin值的话,那么在ie6里面的实际距离是设置值的双倍。要解决这个问题不复杂,只要给这个元素加个 display:inline属性即可,但不建议这么
NULL 博文链接:https://helloklzs.iteye.com/blog/1305519
IE6下绝对定位的容器内文本无法正常选择的问题 IE6下为什么图片下方有空隙产生 IE6下这两个层中间怎么有间隙 list-style-image无法准确定位的问题 LI中内容超过长度后以省略号显示的方法 web标准中定义id与class有...
2、IE6双倍浮动BUG及解决办法 比如 复制代码代码如下: #div1 { float:left; margin-left:10px; width:200px; height:200px; border:1px solid red } 左margin边界设定为了10px,然后IE6却偏偏给你显示成双倍的20...
前两天看的《IE6 很邪恶,但我爱它的盒子模型》,我说盒子模型如何如何,面试官告诉我IE5的盒子模型有问题,不是IE6。 回来查查书,《Web标准实战》上说了,是IE5/Win的盒子模型有问题。看来CSS还是不够精通。 特...
2、IE6在块元素、左右浮动、设定marin时造成margin双倍(双边距) 解决方法:display:inline 3、以下三种其实是同一种bug,其实也不算是个bug,举个例子:父标签高度20,子标签11,垂直居中,20-11=9,9要分给文字...
c#的3DES加密解密强制要求不能使用简单的密钥,这里按照3DES双倍长的算法原理,实现双倍长的加密解密
cad超级实用工具-CAD双倍加速插件.zip
固定资产折旧年数总和法、双倍余额递减法培训课件.pptx
doctype html> 2、IE6在块元素、左右浮动、设定marin时造成margin双倍(双边距)解决方法:display:inline 3、以下三种其实是同一种bug,其实也不算是个bug,举个例子:父标签高度20,子标签11,垂直居中,20-11=9...
双倍余额递减折旧法_Excel DDB函数的应用.rar,本例分别介绍DDB函数的最后一期折旧额转为净值减残值的差额和不转的两种情况。例中所使用算术公式与DDB函数相互验证公式结果的正确性,并且提供会计中定义的双倍余额...
Des加解密(单双倍)、Mac运算、XOR运算、分散运算(简单易用测试小工具)