IE6 双倍水平外边距BUG以解决方案

iwebcode

浏览: 2007670 次
性别:
来自: 杭州

最近访客更多访客>>

u012363178

yefeng_laixi

无为我是谁

firehack

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2435)

社区版块

存档分类

2013-02 ( 13)
2013-01 ( 57)
2012-12 ( 62)
更多存档...

出现条件：

1、没有设置display:inline的块元素

2、浮动元素

3、设置了水平外边距（浮动的方向和水平外边距设置的方向一致）

4、元素与父容器之间

备注：因为浮动都有其相对应的对象，只有相对于其父容器的浮动才会出现这样的问题。第一个元素是相对父容器的，而第二个是相对第一个兄弟元素的，所以第二个浮动元素不会出现双倍水平外边距问题。而且只有设置水平外边距的值才会出现双倍外边距，垂直外边距没有关系。

解决办法：给浮动块框设置display:inline解决问题

下面是测试代码：

[html]view
 plaincopyprint?

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8"/>

<title>IE6双倍水平外边距</title>

<style>

*{

margin:0;

padding:0;

}

.testbox{

background:#CCC;

width:100px;

height:100px;

margin:10px0010px;

float:left;

display:inline;/*去掉display:inline在IE6下看看效果*/

}

</style>

</head>

<body>

<divclass="testbox">IE6浮动双倍外边距</div><divclass="testbox">IE6浮动双倍外边距</div>

</body>

</html>

原因分析：这个现象仅当块框设置了浮动才会出现，行内框浮动不会出现此问题。因为行内框默认display:inline，给其float后自动就具有块框特性，所以如果是span之类的行内框，浮动后是不需要再单独设置display:inline就可以自动消除双倍水平外边距。

下面是测试代码：

[html]view
 plaincopyprint?

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8"/>

<title>IE6双倍水平外边距</title>

<style>

*{

margin:0;

padding:0;

}

.testbox{

background:#CCC;

width:100px;

height:100px;

float:left;

margin:10px0010px;

}

</style>

</head>

<body>

<spanclass="testbox">IE6浮动双倍外边距</span><spanclass="testbox">IE6浮动双倍外边距</span>

</body>

</html>

总结一下：

如果默认的是块元素例如div之类的，在设置 float 后同时要置display:inline来解决IE6的双倍水平外边距；

如果默认是内联元素例如span之类的，那么浮动后是没有关系的，因其自身居右display:inline，所以不需要再重复添加该属性。

分享到：

解决IE6、IE7、Firefox的CSS HACK 方法 ... | J2SE小结

2012-03-10 10:06
浏览 869
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论