首页 > 折腾WP > IE6、7 CSS 浮动清除问题

IE6、7 CSS 浮动清除问题

今天用 IEtest 看了下自己的博客,发现在IE6、7中标题下方的文章信息与下面的文章间隔不是一般的大。查看了下代码和CSS样式,推测应该是通过 clear:both 清除浮动这部分在各个浏览器的兼容问题。

网上找了下,确实是这个问题,主题用的是以下比较常见的清除浮动的方法:

<div>
    <div style="float:left">content1</div>
    <div style="float:right">content2</div>
    <div style="clear:both"></div>
</div>

这种方法比较直观,但缺点是增加了多余html代码。在一些浏览器中(比如IE6、7)就会出现多余的 div 空行。另外还有一种所谓的“万能 float 闭合”方法:

<style>
/* Clear Fix */
.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>
<div class="clearfix">
    <div style="float:left">content1</div>
    <div style="float:right">content2</div>
</div>

用了上面这种方法终于解决了多余html代码的问题,至少我这里用IEtest测试正常了。望大家帮忙测试看看文章正文和文章信息之间空行是否正常,谢谢了。

  1. GAO CHEN@ 2011.03.12 / 11:35| #1

    真麻烦哈哈

  2. 亿品元素@ 2011.03.16 / 14:44| #2

    也试试这种方法

  3. 云阳吧@ 2012.04.24 / 21:49| #3

    哎,找了那么多方法。烦死了。。

评论提交中, 请稍候...