IE6下margin双倍边距Bug的处理办法
2016-01-25 17:35
337 查看
改了一天,我才发现了问题,除了IE6双倍边距之外,其他的浏览器都没有问题,为此改了无数次的代码。为了修复双倍边距bug,整理了一下的资料。
一、什么是双边距Bug?
先来看图:
我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度。要实现这样的效果,我们给绿色盒模型应用以下CSS属性:
以下为引用的内容:
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
}
很简单,对吧?但是当我们在IE6中查看时,会发现左侧外边距100像素,被扩大到200个像素。如下图:
二、怎么会这样?
说实话,这个原因还真是不清楚。但是这样的结果确确实实在IE6中出现了。而且这种情况出现的条件是当浮动元素的浮动方向和浮动边界的方向一致时才会出现。如同上面的例子一样,元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理,元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素,第一个浮动元素会出现这个双边距bug,其它的浮动元素则不会。
三、如何修正这个Bug?
很简单,只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单?对,就这么简单。如下图:
CSS代码如下:
以下为引用的内容:
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}
一、什么是双边距Bug?
先来看图:
我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度。要实现这样的效果,我们给绿色盒模型应用以下CSS属性:
以下为引用的内容:
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
}
很简单,对吧?但是当我们在IE6中查看时,会发现左侧外边距100像素,被扩大到200个像素。如下图:
二、怎么会这样?
说实话,这个原因还真是不清楚。但是这样的结果确确实实在IE6中出现了。而且这种情况出现的条件是当浮动元素的浮动方向和浮动边界的方向一致时才会出现。如同上面的例子一样,元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理,元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素,第一个浮动元素会出现这个双边距bug,其它的浮动元素则不会。
三、如何修正这个Bug?
很简单,只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单?对,就这么简单。如下图:
CSS代码如下:
以下为引用的内容:
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}
相关文章推荐
- SourceProvider.getJniDirectories
- 微软高管称中国是IE6消亡最大障碍
- Trac 中文语言安装
- 软件 bug 的生命周期
- Firefox2中输入框丢失光标bug的解决方法
- ie6 注释引起的问题
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera
- for命令的一些bug分析
- 修正IE下使用CSS属性overflow的bug
- IE6,IE7和firefox对DIV的支持区别
- 解决IE6 3像素Bug的css写法
- xmlHttp ie6下不跨域还提示没有权限,ie8下不会有这错误
- IE6下js通过css隐藏select的一个bug
- 跟我学习JScript的Bug与内存管理
- IE6兼容透明背景图片及解决方案
- JS注释所产生的bug 即使注释也会执行
- IE6-IE9使用JSON、table.innerHTML所引发的问题
- IE本地存储userdata的一个bug说明