CSS中IE6下双边距BUG解决方案
2015-03-21 17:26
375 查看
其实这个问题在刚学习CSS的时候就知道怎样解决了,但是一直不知道为什么会出现这种现象,今天顺便记录一下。
![](http://img.blog.csdn.net/20150321171845136)
如上述图片实际上我们在一个父亲div中嵌套了一个儿子div元素,给儿子div,儿子div在设置margin-left:100px的时候实际上在IE6中会出现200px的效果。这是因为块级对象默认的display属性值是block,当设置了浮动的同时,还设置了它的外边距就会出现这种情况。也许你会问:“为什么第二个儿子对象和第一个儿子对象之间就不存在双倍边距的BUG”?因为浮动都有其相对应的对象,只有相对于其父对象的浮动对象才会出现这样的问题。第一个儿子对象是相对父对象的,而第二个儿子对象是相对第一个儿子对象的,所以第二个儿子对象在设置后不会出现问题。另外在一些特殊布局中,可能需要组合使用display:block;和display:inline;才能达到预期效果。
总结:这个现象仅仅出现在block元素中,而inline元素中不会出现这种现象,同时也不会出现上下边距的情况,如果实在不行也可以尝试使用HACK方式,但是不推荐这种方式(不利于后期的维护),也不符合WEB标准。
1.为什么会出现双边距BUG?
<style type="text/css"> body,div{padding: 0;margin: 0;} .box{border: 10px solid black;float: left;} .inner{width: 100px;height: 100px;background: red;float: left;margin: 0 100px;} .inner2{width: 100px;height: 100px;background: red;float: left;margin: 0 100px;} } </style> <div class="box"> <div class="inner"></div> <div class="inner2"></div> </div>
如上述图片实际上我们在一个父亲div中嵌套了一个儿子div元素,给儿子div,儿子div在设置margin-left:100px的时候实际上在IE6中会出现200px的效果。这是因为块级对象默认的display属性值是block,当设置了浮动的同时,还设置了它的外边距就会出现这种情况。也许你会问:“为什么第二个儿子对象和第一个儿子对象之间就不存在双倍边距的BUG”?因为浮动都有其相对应的对象,只有相对于其父对象的浮动对象才会出现这样的问题。第一个儿子对象是相对父对象的,而第二个儿子对象是相对第一个儿子对象的,所以第二个儿子对象在设置后不会出现问题。另外在一些特殊布局中,可能需要组合使用display:block;和display:inline;才能达到预期效果。
2.解决方案
在第一个儿子对象div中设置display: inline
总结:这个现象仅仅出现在block元素中,而inline元素中不会出现这种现象,同时也不会出现上下边距的情况,如果实在不行也可以尝试使用HACK方式,但是不推荐这种方式(不利于后期的维护),也不符合WEB标准。
相关文章推荐
- IE6中CSS常见BUG全集及解决方案
- HTML+CSS结构中IE6BUG全集及解决方案
- IE6中CSS常见BUG全集及解决方案
- HTML+CSS结构中IE6BUG全集及解决方案
- IE6中CSS常见BUG全集及解决方案——摘自网友
- IE6 双倍水平外边距BUG以解决方案
- jquery博客收集的IE6中CSS常见BUG全集及解决方案
- IE6中CSS常见BUG全集及解决方案
- CSS优先级和!important与IE6的BUG讨论及解决方案
- IE6中CSS常见BUG全集及解决方案
- IE6中CSS常见BUG全集及解决方案
- jquery博客收集的IE6中CSS常见BUG全集及解决方案
- jquery博客收集的IE6中CSS常见BUG全集及解决方案
- IE6中CSS常见BUG全集及解决方案
- [技巧] IE6中常见的CSS bug集合以及解决方案
- css 和javascript 在ie6 ie7 ie8和Firefox下bug兼容解决记录
- IE6 margin 双倍边距解决方案
- DIV+CSS页面设计中的IE6的文字溢出BUG
- 【IE6双倍边距】-IE6双倍边距的bug
- [DIV+CSS] IE6浮出层穿透解决方案中的iframe高度自适应