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)
blank

相关推荐

  • leetcode-149. 直线上最多的点数(map+判重)[通俗易懂]

    leetcode-149. 直线上最多的点数(map+判重)[通俗易懂]给定一个二维平面,平面上有 n 个点,求最多有多少个点在同一条直线上。示例 1:输入: [[1,1],[2,2],[3,3]]输出: 3解释:^|| o| o| o +————->0 1 2 3 4示例 2:输入: [[1,1],[3,2],[5,3],[4,1],[2,3],[1,4]]输出: 4解释:^|| o| o o| o| o o+—–

  • 摩斯密码(摩斯密码背诵口诀 小学生)

    突然对密斯密码很感兴趣,所以在网上找了一些有关的资料,供大家参考.呵呵,还是很有意思的. 1【侦探手册】摩斯密码介绍及应用                               摩斯密码表 A._           M__           Y_.__ B_…       N_.           Z__.. C_._. …

  • ubuntu20.04内核降级_ubuntu20更新内核

    ubuntu20.04内核降级_ubuntu20更新内核Ubuntu20.04如何降低内核版本?如题,在不小心安装新内核之后,发现没办法降级(网上的各种方法最后结合信息摸索出了解决方案:首先,查看自己的grub版本:grub-install–version记住(GRUB)之后的大版本是2.00以后还是2.00以前查看自己现有的内核版本(完全版)grep’menuentry’/boot/grub/grub.cfg找到自己想换回的内核例如,这里我想要更换为5.8.0-50,就找到对应的选项,有menuentry’U

  • scratch编程滑雪者游戏教程

    scratch编程滑雪者游戏教程首先我们来看一下效果:​​​​​​​​​​​​​​​​我们从演示中能看出4个角色:企鹅、大树、旗子和装饰用的坎,我们通过键盘操控企鹅滑雪躲避树并捡起旗子,现在我们就来看看是怎么编的吧!首先我们要画出企鹅的造型,造型的排列一定不能乱哦!​下面是具体程序:上面的程序会根据当前的造型而做出不同的变化接着我们来看树的程序:旗子的程序和大树的几乎一模一样,就只有碰到滑雪者的一部分有点区别:最最最简单的一部分就是坎的程序了,坎只管滑行碰到边缘在删除就可以了,在中途什么也不用管这个

  • df.fillna()_python的dropna

    df.fillna()_python的dropnaimportpandasaspdimportnumpyasnpdf=pd.DataFrame([[1,2,3],[np.nan,np.nan,2],[np.nan,np.nan,np.nan],[8,8,np.nan]])dfdf.fillna({0:10,1:11,2:22})有人问,列中以为有了nan,所以…

发表回复

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

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