IE双边距问题
来源:互联网 发布:2010网络购物交易额 编辑:程序博客网 时间:2024/04/28 06:18
转自:http://www.cnblogs.com/ndxsdhy/archive/2011/01/25/1944872.html
"
一、什么是双边距Bug?
先来看图:
我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且 要留出内容栏的宽度。要实现这样的效果,我们给绿色盒模型应用以下CSS属性:
以下为引用的内容:
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*外边距的最后一个值保 证了100像素的距离*/
}
很简单,对吧?但是当我们在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;
}
"
0 0
- IE双边距问题
- IE 双边距Bug
- ie6双边距问题
- 【Html】双边距问题
- IE-6的双边距BUG
- 一个关于ie的bug——双边距bug。
- css 黑客解决IE6,双边距问题
- IE6浮动双边距
- 元素双边距解决方案
- IE6双边距bug*
- ie6双边距
- 浏览器兼容性经典问题(一) IE6 下双边距问题
- 解决IE6浮动元素产生的“双边距”BUG问题及解决办法
- ie8中checkbox双边框问题
- IE6下的双边距BUG
- 05_02.IE6双边距bug
- IE6双边距bug及其解决办法
- IE6双边距bug及其解决办法
- 使用dir()、readdir()和glob()遍历目录及测试性能
- 1-10
- 1.14
- Firefox about
- jQuery简单实用的图片标题动画效果插件
- IE双边距问题
- 题目1122:吃糖果
- 2015年第五周项目三:用多文件组织多个类的程序
- Windows查看port端口被占用的程序及终止
- 第10题
- 1-11
- Eclipse中设置JVM使用内存大小
- [Cocos2d塔防游戏开发]Cocos2dx-3.X完成塔防游戏《王国保卫战》--地图(二)
- git冲突解决