美文网首页
完美解决IE6中双边距BUG问题

完美解决IE6中双边距BUG问题

作者: 叫丽丽啊 | 来源:发表于2018-07-09 11:48 被阅读75次

一,什么是双边距BUG

例如:我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度:


1.png

要实现这样的效果,我们给绿色盒模型应用以下CSS属性:

.floatbox {
 float: left; 
width: 150px;
 height: 150px;
 margin: 5px 0 5px 100px;
//外边距的最后一个值保证了100px的距离
 }

看起来很简单,但是当我们在IE6查看时,却会发现左边距的100px, 被扩展到了200px!如下:


2.png

二,为什么会这样?

出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现。也就是说,并不是只有块状元素左浮动,且具有左外边距时才有这个BUG,当一个盒子右浮动的同时有一个向右的margin-right的时候,IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了,而且都有同方向的margin,则只有最靠近浮动方向的元素有双边距bug。

三,如何解决?

很简单,只需要给浮动元素加上display:inline;这样的CSS属性就可以了。如下图


3.png

CSS代码如下:

.floatbox {
float: left; 
width: 150px;
height: 150px; 
margin: 5px 0 5px 100px;
display: inline;
 }

没错,就是这么简单啦~

相关文章

  • 完美解决IE6中双边距BUG问题

    一,什么是双边距BUG 例如:我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。这个例子...

  • 完美解决IE6中双边距bug

    .box{ float: left; width: 150px; height: 150px; margin: 5...

  • html 常见兼容性问题?

    1、IE的双边距BUG:块级元素float后设置横向的margin,ie6显示的margin比较大。 解决办法:_...

  • IE6、7下的几个常见问题

    IE6下的双边距问题 条件:浮动下、块元素解决办法:display:inline IE6,7下的li间隙问题 条件...

  • 前端面试题集(2)

    1.IE的双边距BUG:块级元素float后设置横向margin,ie6显示的margin比设置的较大。 解决:加...

  • 10css兼容性问题

    margin兼容性问题 display:inline-block IE6 最小高度问题 IE6 双边距 li里元素...

  • IE6下的双边距bug

    在IE6下如果一个块元素被添加浮动属性,它的横向margin值会变成在标准浏览器下的两倍如果有多个块,只会影响首尾...

  • 兼容IE6

    ie6常见bug及其解决办法 一、IE6双倍边距bug 如下图所示,一个样式里面既设定了“float:left;”...

  • IE6下常见兼容性总结

    1.横向双边距bug bug产生原因:margin的方向与浮动的方向相同解决方法:浮动的元素身上加 display...

  • 浏览器兼容性经典问题[整理篇]

    不只做代码的搬运工:学习、研究、测试、总结、再收藏 (一) IE6 下双边距问题 问题描述: 一个div盒子如果设...

网友评论

      本文标题:完美解决IE6中双边距BUG问题

      本文链接:https://www.haomeiwen.com/subject/yfmzuftx.html