解决IE6双倍边距BUG

解决IE6双倍边距BUG,只要满足下面3个条件才会出现这个BUG:

1）要为块状元素;
2）要左侧浮动;
3）要有左外边距(margin-left);

解决这个BUG很容易，只需要在相应的块状元素的CSS属性中加入“display:inline;”，代码如下：

#redBlock{
width:200px;
height:200px;
background:#900;
margin-top:20px;
margin-left:20px;
float:left;
display:inline;
}

时间： 2024-08-27 13:29:29

解决IE6双倍边距BUG的相关文章

【IE6双倍边距】-IE6双倍边距的bug

效果代码 CSS IE6双倍边距的bug body { margin: 0; padding: 0; } .div1 { width: 200px; height: 200px; background: red; margin-top: 20px; margin-left: 20px; float: left; display: inline; } .div2 { width: 300px; height: 200px; background: blue; float: left; } bug

IE6下margin双倍边距Bug的处理办法

改了一天,我才发现了问题,除了IE6双倍边距之外,其他的浏览器都没有问题,为此改了无数次的代码.为了修复双倍边距bug,整理了一下的资料. 一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度.要实现这样的效果,我们给绿色盒模型应用以下CSS属性: 以下为引用的内容:.floatbox { float: left; width: 150px; height

双倍边距bug

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin: 0; padding: 0;} li{width: 59px; height: 87px; float: left; margin: 20px; background: #333333; po

CSS中IE6下双边距BUG解决方案

其实这个问题在刚学习CSS的时候就知道怎样解决了,但是一直不知道为什么会出现这种现象,今天顺便记录一下. 1.为什么会出现双边距BUG? <style type="text/css"> body,div{padding: 0;margin: 0;} .box{border: 10px solid black;float: left;} .inner{width: 100px;height: 100px;background: red;float: left;margin:

CSS 解决IE6双倍距离BUG

只要满足下面3个条件才会出现这个BUG: 1)要为块状元素: 2)要左侧浮动: 3)要有左外边距(margin-left): 解决这个BUG很容易,只需要在相应的块状元素的CSS属性中加入“display:inline;,

IE6中的常见BUG与相应的解决办法

开发前端的同学一定都知道,IE6是兼容BUG最多的浏览器,它不支持PNG alpha通道暂且不论.其文档的解析理解规范也引起了诸多恼人的BUG,有时甚至让人感到绝望.本文主要讲解一些比较容易遇到的IE6BUG,以及解决的办法. 一.IE6双倍边距bug 当页面上的元素使用float浮动时,不管是向左还是向右浮动:只要该元素带有margin像素都会使该值乘以2,例如“margin-left:10px” 在IE6中,该值就会被解析为20px.想要解决这个BUG就需要在该元素中加入display:in

[ 打败 IE 的葵花宝典 ] IE6中css常见BUG全集及解决方案

IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, 而左侧则呈现出20px,解决它的方法是在浮动元素上加上display:inline;的样式,这样就可避免双倍边距bug. 3像素问题及解决办法当使用float浮动容器后,在IE6下会产生3px的空隙,有意思的是右侧容器没设置高度时3px在右侧容器内部,当设定高度后又跑到容器的左侧了,所以对布局精度要求高的话,请参考例29.31的解决方

IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在父标签中加入overflow:hidden:或zoom:100%示例代码: 不正常显示 ul{} li{ list-style:none; float:left; margin:10px;} 1. 你会发现左边10px 变成20px了, 解决办法:在li的CSS中加入:display:inline

IE6双边距bug及其解决办法

<!DOCTYPE html> <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:200p