margin 相关 bug 系列

原文地址:margin系列之bug巡演 by @doyoe

IE6浮动双倍margin bug

这当是IE6最为经典的bug之一。

触发方式

  • 元素被设置浮动

  • 元素在与浮动一致的方向上设置margin值

来看看详细的代码吧:

HTML

<div id="demo">
    <p>IE6下浮动方向上的margin值将会双倍于其指定值</p>
</div>

CSS

#demo {
    overflow: hidden;
    width: 400px;
    margin: auto;
    padding: 10px 0;
    background: #ddd;
}
#demo p {
    float: left;
    margin-left: 10px;
    background: #aaa;
}

double margin 并不会发生在所有的浮动元素上,同个包含块内,在相同的浮动方向上,它只发生在第一个浮动元素上。

HTML

<div id="demo">
    <p>第一个float:left</p>
    <p>第二个float:left</p>
    <p>第三个float:left</p>
</div>

CSS

#demo {
    overflow: hidden;
    width: 400px;
    margin: auto;
    padding: 10px 0;
    background: #ddd;
}
#demo p {
    float: left;
    margin-left: 10px;
    background: #aaa;
}

double margin只发生在float:left时?

HTML

<div id="demo">
    <p class="a">1 float:left</p>
    <p class="b">2 float:left</p>
    <p class="c">3 float:right</p>
    <p class="d">4 float:right</p>
</div>

CSS

#demo {
    overflow: hidden;
    width: 400px;
    margin: auto;
    padding: 10px 0;
    background: #ddd;
}
#demo .a, #demo .b{
    float:left;
    margin-left:10px;
}
#demo .c, #demo .d{
    float:right;
    margin-right:10px;
}

是的,你可能想到了,第一个左浮动元素和第一个右浮动元素都将会出现 double margin

fix IE6浮动双倍margin bug

方法一:

_margin-left
#demo p {
    float: left;
    margin-left: 10px;
    _margin-left: 5px;
    background: #aaa;
}

方法二:

display:inline
#demo p {
    float: left;
    margin-left: 10px;
    /*_margin-left: 5px;*/
    _display: inline;
    background: #aaa;
}
时间: 2024-10-08 00:32:17

margin 相关 bug 系列的相关文章

SQL Server 优化器特性导致的内存授予相关BUG

原文:SQL Server 优化器特性导致的内存授予相关BUG 我们有时会遇到一些坑,要不填平,要不绕过.这里为大家介绍一个相关SQL Server优化器方面的特性导致内存授予的相关BUG,及相关解决方式,也顺便回答下邹建同学的相关疑问. 问题描述 一个简单的查询消耗了匪夷所思的内存.(邹建同学发现的) 原文链接 Code create table test_mem ( id int identity(1,1) primary key, itemid int not null, date dat

盒子模型之margin相关技巧!

废话不多说,直接进入主题,margin相关技巧. 1.设置元素水平居中:margin:x auto; 2.margin负值让元素位移及边框合并. 外边距合并 指当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 解决外边距合并的方法: a.使用这种特性. b.设置一边的外边距,一般设置margin-top c.将元素浮动或者定位(元素浮动或定位时,不会出现margin合并) margin-top塌陷 在两个盒子嵌套时候,内部的盒子设置的m

margin相关基本知识

html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1rem; color: #212529; wi

CSS系列-margin的BUG

1. 塌陷现象(子元素设置margin-top, 父元素会塌陷) 下面例子,此时子元素其实和父元素的距离是0,离父元素的兄弟节点才是100px 触发父元素的bfc, overflow: hidden, border : 解决方案1:父元素设置透明的 border:  1px solid transparent;  box-sizing: border-box; 解决方案2:父元素设置 overflow: hidden; 解决方案3:父元素设置 display: inline-block; wid

我所遇见的bug 系列1 win7在生成的程序里,播放音频时没声音

1 知识背景,需要具备基本的C/C++编程功能,能阅读c/++项目工程,了解注入的过程 ,了解基本的安全编程 2 需要的东东 注入的驱动及的程序,以及需要注入的dll 3 相关的工具 windbg win7x64虚拟机 pchunter64.exe procxp.exe 3 问题描述 在win7x64用我们自己的工具生成的程序,启动以后打开,视频,音频,播放时没声音 ,期望是有声音的 4 bug定位,bug 相关的代码主要是两大块,一个是驱动,一个是dll. 驱动在进程创建的时候把dll注入到进

margin的BUG

在进行简单的div盒子嵌套时,发现设置margin-top时存在bug,然后就去谷歌搜索了一下,发现margin确实存在bug. bug的现象是父子元素嵌套时,如果子元素是块元素时,对块元素设置margin-top ,如果父元素没有边框,那么margin-top会作用在父元素上. 下面是body里的代码: <div class="red"> <div class="black"></div> </div> style里

C3P0数据库连接池的相关bug解决

数据库连接池的几个常见bug: 1.警告: com[email protected]76c7022e -- APPARENT DEADLOCK!!! Creating emergency threads for unassigned pending tasks! 十月 01, 2016 6:28:24 下午 com.mchange.v2.async.ThreadPoolAsynchronousRunner$DeadlockDetector run 80%以上原因是数据连接配置或数据库等类似问题.

百度地图 javascript相关Bug搜集

一 在手机里用百度地图js版做webapp   bug集合 1 之前用2.0版本的时候发现只要地图添加了覆盖物,无论数量多少,当地图放大到很小的范围时候,会卡死 1.1 当时处理办法:将版本降低至1.5版本再无此问题 2 今天测试自定义覆盖物的时添加点击事件,在andorid里面可以触发点击事件,但是换到ios里面打死都不触发 2.1 尝试解决:将版本换回2.0问题依旧 2.2 改用touchstart事件,问题得到解决,参考帖子:http://bbs.lbsyun.baidu.com/foru

jQuery的attr方法和prop方法的区别及相关bug处理

以下是jQuery API文档对attr方法和prop方法的概述: attr(name|properties|key,value|fn):Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.(获取匹配元素集合中的第一个元素的属性值,或为每一个匹配元素设置一个或多个属性) p