真是可喜可贺，冷博客在火狐和chrome中排版混乱的问题终于解决了。原因是：div的float属性在非IE浏览器中不兼容。

改版之前的冷博客（谷歌浏览器）

ccs-div-02

改版前的冷博客（火狐浏览器）

ccs-div-06

现在的冷博客就是正常的啦~ :pxxiao:

如果你也出现这种问题，可以按以下方法解决：

很多wordpres博客为了增加访客友好度，增加了上一页、下一页链接，一般都按照如下方法：

在style.css增加如下内容：

.floatleft {
float:left;

}
.floatright {
float:right;

}

然后在页面文件single.php的合适位置，增加以下内容：

<div class="floatleft" ><?php previous_post(‘%’, ‘上一篇：’, ‘yes’); ?>
</div>
<div  class="floatright"><?php next_post(‘%’, ‘下一篇：’, ‘yes’); ?>
</div>

这样一来，在IE中基本没有排版问题，而在其他浏览器中出现问题，如一开始的图。

解决办法是在single.php的上述代码后面紧接着写入：

<div style="clear:both;"></div>
</div>

目的是闭合标签浮动，也就是说每个/组 float 后面都要添加以上代码，代码可以清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签。但是它确实是W3C推荐的方法。

由于冷博客是编程盲，以前对css和div一窍不通，经过这个问题，发现css是如此的神奇和好用。这个方法是：http://www.webjx.com/css/divcss-6287.html 这里看到的，文章还提供了其他三种方法（使用after伪类、设置overflow为hidden或者auto、浮动外部元素，float-in-float），有兴趣的可以看看。