您的位置:晶晶的博客>前端>IE系列的margin所导致布局问题及其解决方法[转]

IE系列的margin所导致布局问题及其解决方法[转]

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。

转载请注明本文标题和链接:《IE系列的margin所导致布局问题及其解决方法[转]

相关推荐

网友评论4

路人甲 表情
Ctrl+Enter快速提交
  1. #1

    分析得好,支持下,可以转载吗?

    优酷做广告 4年前 (2013-07-06) 回复
  2. #2

    字里行间,透露着你的智慧。

    早泄能治好吗 4年前 (2013-07-04) 回复
  3. #3

    佛看到了你手执如椽大笔、写天下文章的智慧神态;仿佛看见了你按剑四顾、指点江山的英武气概!

    玫琳凯之窗 5年前 (2013-05-21) 回复
  4. #4

    大师的话真如“大音希声扫阴翳”,犹如“拨开云雾见青天”,仿佛看见了你按剑四顾、指点江山的英武气概!

    人本鞋怎么样 5年前 (2013-04-15) 回复