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

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

最近在学前端, 转自沈夕博http://hi.baidu.com/skillshen/

一、什么是双边距Bug?

先来看图:

2011012520001920.png

我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且 要留出内容栏的宽度。要实现这样的效果,我们给绿色盒模型应用以下CSS属性:

 

以下为引用的内容:
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*外边距的最后一个值保 证了100像素的距离*/
}

很简单,对吧?但是当我们在IE6中查看时,会发现左侧外边距100像素,被扩大到200个像素。如下图:

2011012520002984.png

二、怎么会这样?

说实话,这个原因还真是不清楚。但是这样的结果确确实实在IE6中出现了。而且这种情况出现的条件是当浮动元素的浮动方向和浮动边界的方向一致时才 会出现。如同上面的例子一样,元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理,元素向右浮动并且设置右边距也会出现同样的情况。同一 行如果有多个浮动元素,第一个浮动元素会出现这个双边距bug,其它的浮动元素则不会。

三、如何修正这个Bug?

很简单,只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单?对,就这么简单。如下图:

2011012520003993.png

 

CSS代码如下:

 

以下为引用的内容:
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}

转载于:https://www.cnblogs.com/ndxsdhy/archive/2011/01/25/1944872.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/110666.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 关于get请求的长度限制到底是多少?—-一个误区,一个教训

    关于get请求的长度限制到底是多少?—-一个误区,一个教训截至今日之前,我一直因为从某处看到get、post区别中写的:get有长度限制,1024B。很抱歉在未经过个人的检验后,直接奉为正确的定义(也提醒我个人:以后概念理论,还是需要好好验证或求证,要能在繁杂的网络知识中,认真求真,以防以讹传讹!!!)。今日,看到前同事大牛多年前的csdn知识总结,发现原来一直信奉的1024Get请求长度,是错误的。下面把从权威官网的解释复制过来,以做…

  • 操作系统的定义与基本概念_计算机系统的概念

    操作系统的定义与基本概念_计算机系统的概念1、操作系统的概念及定义1.1操作系统的层次结构从上至下,用户——应用程序——操作系统——裸机(纯硬件)。操作系统OS(OperatingSystem)是指控制和管理整个计算机系统的硬件和软

  • Git:代码冲突常见解决方法[通俗易懂]

    Git:代码冲突常见解决方法[通俗易懂]Git:代码冲突常见解决方法

  • Silverlight网站实例资源收集(1)

    Silverlight网站实例资源收集(1)Silverlight做的试用VisualStudio2008http://www.challenges.com.cn/ 全功能的相册http://msbluelight-0.agappdom.net/e1/d/72193/13304799/63356644800/0.vpFl7uJ79e1H4xExhhjCX701HlA/zziframehtml2zz.html#%2f%2

    2022年10月18日
  • nv12转rgb「建议收藏」

    nv12转rgb「建议收藏」nv12格式nv12转rgb两种格式代码voidNV12_T_RGB(unsignedintwidth,unsignedintheight,unsignedchar*Y,unsignedchar*UV,unsignedchar*rgb){ intr,g,b; inty,u,v; for(inti=0;i<height;i++){ for(intj=0;j<width;j++){ y=

  • golang 大数据平台_golang 如何处理大数据[通俗易懂]

    golang 大数据平台_golang 如何处理大数据[通俗易懂]Golang被证明非常适合并发编程,goroutine比异步编程更易读、优雅、高效。本文提出一个适合由Golang实现的Pipeline执行模型,适合批量处理大量数据(ETL)的情景。想象这样的应用情景:(推荐学习:go)从数据库A(Cassandra)加载用户评论(量巨大,例如10亿条);根据每条评论的用户ID、从数据库B(MySQL)关联用户资料;调用…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号