一聚教程网:一个值得你收藏的教程网站

热门教程

IE6中float造成margin值双倍解决办法

时间:2022-06-25 11:18:12 编辑:袖梨 来源:一聚教程网

例1

一个元素向左浮动(float:left),且添加了向左空白边(margin-left:10px),那么会自动的加一倍变成30px。
例:

 代码如下 复制代码





IE6双空白边Bug




IE6双空白边bug




解决方法:

给div[id=d1]加:display:inline,当然只针对IE6一下,可以使用下划线加属性-display:inline,这样只有IE6能识别了。
边距翻倍只有当元素的边距碰到包含块时才发生。当一个元素被浮动到另一个浮动元素时不会翻倍。另marginTop和marginBottom都不会翻倍。

不知道大家有没有看懂没懂我们再看

例2

假如为一个div设置css

float:left;
margin-left:10px;
在IE7,Firefox等浏览器下能正确解释左边距10px。但是在IE6下会理解为左边距20px。

解决方法:

为这个div的css中添加:

display:inline;这个是ie6的bug,下面还有更好的解决办法!借助于padding样式和!important标记,可以实现Firefox与IE6的兼容效果。

 代码如下 复制代码

借助于padding样式和!important标记,可以实现Firefox与IE6的兼容效果。


           

                width: 100px;
                height: 100px;
                margin: 100px;
           

第一种:

 代码如下 复制代码

.div {
background:orange;/*ff*/
*background:green !important;/*ie7*/
*background:blue; /*ie6*/
}

第二种:

 代码如下 复制代码

.div {
margin:10px;/*ff*/
*margin:15px;/*ie7*/
_margin:15px;/*ie6*/
}

第三种:

 代码如下 复制代码

#div { color: #333; } /* ff */
* html #div { color: #666; } /* IE6 */
*+html #div { color: #999; } /* IE7 */

热门栏目