常见的浏览器下margin出现的bug

IE6中双边距Bug:
发生场合:当给父元素内第一个浮动元素设置margin-left(元素float:left)或margin-right(元素float:right)时margin加倍。
解决方法:是给浮动元素加上display:inline;CSS属性;或者用padding-left代替margin-left。
原理分析:块级对象默认的display属性值是block,当设置了浮动的同时,还设置了它的外边距就会出现这种情况。也许你会问:“为什么之后的对象和第一个对象之间就不存在双倍边距的Bug”?因为浮动都有其相对应的对象,只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的,而之后对象是相对第一个对象的,所以之后对象在设置后不会出现问题。为什么display:inline可以解决这个双边距bug,首先是inline元素或inline-block元素是不存在双边距问题的。然后,float:left等浮动属性可以让inline元素haslayout,会让inline元素表现得跟inline-block元素的特性一样,支持高宽,垂直margin和padding等,所以div class的所有样式可以用在这个display inline的元素上。

IE6中浮动元素3px间隔Bug:
发生场合:发生在一个元素浮动,然后一个不浮动的元素自然上浮与之靠近会出现的3px的bug。
解决方法:右边元素也一起浮动;或者为右边元素添加IE6 Hack _margin-left:-3px;从而消除3px间距。
原理分析:IE6浏览器缺陷Bug。

IE6/7负margin隐藏Bug:
发生场合:当给一个有hasLayout的父元素内的非hasLayout元素设置负margin时,超出父元素部分不可见。
解决方法:去掉父元素的hasLayout;或者赋hasLayout给子元素,并添加position:relative;
原理分析:IE6/7独有的hasLayout产生问题。

IE6/7下ul/ol标记消失bug:
发生场合:当ul/ol触发了haslayout并且是在ul/ol上写margin-left,前面默认的ul/ol标记会消失。
解决方法:给li设置margin-left,而不是给ul/ol设置margin-left。
原理分析:IE6/7浏览器Bug

IE6/7下margin与absolute元素重叠bug:
发生场合:双栏自适应布局中,左侧元素absolute绝对定位,右侧的margin撑开距离定位。在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。
解决方法:把左侧块级元素更改为内联元素,比如把div更换为span。
原理分析:这是由于IE6/IE7浏览器将inline水平标签元素和block水平的标签元素没有加以区分一视同仁渲染了。属于IE6/7浏览器渲染Bug。

IE6/7/8下auto margin居中bug:
发生场合:给block元素设置margin auto无法居中
解决方法:出现这种bug的原因通常是没有Doctype,然后触发了ie的quirks mode,加上Doctype声明就可以了。在《打败IE的葵花宝典》里给出的方法是给block元素添加一个width能够解决,但根据本人亲测,加with此种方法是无效的,如果没有Doctype即使给元素添加width也无法让block元素居中。
原理分析:缺少Doctype声明。

IE8下input[button | submit] 设置margin:auto无法居中
发生场合:ie8下,如果给像button这样的标签(如button input[type="button"] input[type="submit"])设置{ display: block; margin:0 auto; }如果不设置宽度的话无法居中。
解决方法:可以给为input加上宽度
原理分析:IE8浏览器Bug。

IE8百分比padding垂直margin bug:
发生场合:当父元素设置了百分比的padding,子元素有垂直的margin的时候,就好像父元素被设置了margin一样。
解决方法:给父元素加一个overflow:hidden/auto。
原理分析:IE8浏览器Bug。

来自:http://www.hicss.net/do-not-tell-me-you-understand-margin/

margin---bug的更多相关文章

  1. margin和padding那点事及常见浏览器margin padding相关Bug

    用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的 ...

  2. margin 相关 bug 系列

    原文地址:margin系列之bug巡演 by @doyoe IE6浮动双倍margin bug 这当是IE6最为经典的bug之一. 触发方式 元素被设置浮动 元素在与浮动一致的方向上设置margin值 ...

  3. margin中的bug解决方法

    margin bug问题 : 当做子元素中使用margin-top: 50px;父子元素都会跑出50px, 解决方法: 在父元素中使用下面三种任意一种都可以. 方法一:给父元素加边框 border: ...

  4. ie6,ie7,ie8 css bug兼容解决方法

    IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...

  5. 不要告诉我你懂margin

    分类: Html/CSS | 转载请注明: 出自 海玉的博客 本文地址: http://www.hicss.net/do-not-tell-me-you-understand-margin/ 你真的了 ...

  6. 10个常见的IE bug和解决方法

    1.IE6 幽灵文本(Ghost Text bug) 在我写本文之前,我遇到了这个bug.它相当的古怪和滑稽.一块不知哪来的重复的文本,被IE6显示在靠近原文本的下面.(译注:也可以参看 Explor ...

  7. HTML/CSS中常遇到的bug 一些注意事项总结

    1.IE6下横向双倍margin bug (触发条件:块属性标签:float:横向margin设置:IE6下.解决办法:css中加入display:inline.) 2.css中公用属性首先声明:如对 ...

  8. margin系列之keyword auto

    本系列摘自  px; margin: auto; /* 或者 margin: 0 auto; */ } HTML: <div id="demo"> <p>恩 ...

  9. IE的CSS相关的BUG(整理一)

    本来不想弄这个ie的bug的,真的很想让它快点死掉,可是事与愿违啊,没办法,还是贴出来,以备自用. 这个网页(http://haslayout.net/css/index)上例举了所有的IE和CSS相 ...

  10. Margin是什么?

    Margin是什么 CSS 边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界,元素周围生 ...

随机推荐

  1. 利用systemtap定位ifconfig dropped数据包的原因

    http://blog.chinaunix.net/uid-20662820-id-3842431.html   欢迎转载,转载请保留文章的完整性!Author: Tony <tingw.liu ...

  2. android 图片浏览器滑动切换图片

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  3. MySQL---笔记之视图的使用详解

    什么是视图  视图是从一个或多个表中导出来的表,是一种虚拟存在的表. 视图就像一个窗口,通过这个窗口可以看到系统专门提供的数据. 这样,用户可以不用看到整个数据库中的数据,而之关心对自己有用的数据. ...

  4. MySQL安装总是失败,提示缺少Visual Studio 2013 Redistributable

    MySQL安装总是失败,提示缺少Visual Studio 2013 Redistributable,但是很疑惑,我明明已经安装了呀,原来问题出在版本上,以下提供了一个可以匹配新版本mysql的版本: ...

  5. grunt 试用笔记

    Gruntjs是JavaScript项目的构建工具,也是基于node的一个命令行工具.很多开源JS项目都是使用它搭建.如jQuery.Qunit.CanJS等.它有以下作用 合并JS文件压缩JS文件单 ...

  6. weexpack build android 和 weexpack run android 报错 及 解决方案

    1. weexpack build android (1)Configuring > 0/3 projects > root project > Resolving dependen ...

  7. 在线API

    JExcelApi http://jexcelapi.sourceforge.net/resources/javadocs/index.html Poi http://poi.apache.org/a ...

  8. saltstack安装配置(syndic)

    syndic是saltstack用来做集群部署的,一般结构如图: syndic是一个特殊的minion,syndic类继承于minion类,syndic可以看作一个代理,只做数据传递. CentOS上 ...

  9. mysql limit分页优化方法分享

    同样是取10条数据  select * from yanxue8_visit limit 10000,10 和  select * from yanxue8_visit limit 0,10  就不是 ...

  10. vmware 自动挂起

    用VMware跑虚拟机,经常会出现客户操作系统自己挂起的现象,怀疑是主机自己休眠的设置.设置之后,无效. 后来才发现不是主机休眠设置,还是应该设置客户操作系统中的休眠设置. 在客户机,控制面板  电源 ...