CSS FLOAT 扫盲之ie6 下双倍margin问题
2010-10-28 23:18
525 查看
问题描述
在ie6下面如果某元素同时应用了float和margin属性,并且margin的方向和float的方向相同的话,会出现双倍的margin。
下图的css样式如下
但是在ie6下面会出现margin-left=200情况
如下图
解决方法加上display:inline就可以了,不用担心,这一个div还是一个块元素
其实上面不是最佳的解决方法,因为这样不管是什么浏览器都会执行display:inline这样一个动作,改用如下方法会更好
.floatbox
{
float:left;
width:150px;
height:150px;
margin:5px 0 5px 100px;
_display:inline;
}
_display:inline只有ie6会去处理此属性,而别的浏览器可以不考虑此属性,站在一个程序员的立场去考虑问题的话,这样可以节省不少时间,提高页面的渲染速度,仅此而已!
在ie6下面如果某元素同时应用了float和margin属性,并且margin的方向和float的方向相同的话,会出现双倍的margin。
下图的css样式如下
.floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; /*This last value applies the 100px left margin */ }
但是在ie6下面会出现margin-left=200情况
如下图
解决方法加上display:inline就可以了,不用担心,这一个div还是一个块元素
.floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; display: inline; }
其实上面不是最佳的解决方法,因为这样不管是什么浏览器都会执行display:inline这样一个动作,改用如下方法会更好
.floatbox
{
float:left;
width:150px;
height:150px;
margin:5px 0 5px 100px;
_display:inline;
}
_display:inline只有ie6会去处理此属性,而别的浏览器可以不考虑此属性,站在一个程序员的立场去考虑问题的话,这样可以节省不少时间,提高页面的渲染速度,仅此而已!
相关文章推荐
- margin在IE6碰到float时会距离会加倍的问题解决
- IE6下margin双倍的问题解决办法
- css解决IE6下左右margin加倍问题
- CSS ie6中双倍margin解决方案
- ie6的设置外边距margin变双倍的问题
- css margin-left在IE6下的问题的解决方法
- IE6双倍margin问题
- IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法
- IE6中设置了float:left导致margin出现双倍边距的解决方法
- ie6 margin 双倍边距问题
- IE6双倍margin问题(转)
- IE6-浮动margin产生双倍距离的问题
- div+css使用padding样式和!important标记实现Firefox和IE6处理带float样式的margin尺寸上的兼容
- jsp在ie6中css的margin属性失效问题
- IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法
- IE6下margin时,float浮动产生双倍边距
- IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法
- ie6 margin双倍问题
- css_ie6与ie8在调用float:left后margin不协调的调整
- IE6中float:left后导致margin-left双倍边距的BUG解决办法就是是加上display:inline