IE6下CSS三列定位问题

偶博客现在用的主题,在IE6下显示有一个小问题:
底部Meta 栏会跑到”Recent Posts ,Recent Comments”的下面,造成无法对齐:如下图

而在FireFox,IE7中显示正常

这个问题虽然不大,但还是另我头痛
偶对CSS可以说十窍通了九窍,换言之,一窍不通
(真的是一点也不懂.汗,各位别笑偶)
今天硬着头皮,来研究一下

用浏览器打开,看看底部代码

到WP后台主题编辑器,看一下这个主题style.css,相关的CSS样式:

.footer-recent-comments {
width: 250px;
float: left;
margin-left: 20px;

}

.footer-recent-posts {
width: 250px;
float: left;
position: relative;
margin-left: 10px;
}

.footer-meta {
width: 225px;
float: right;
margin-left: 10px;
}

偶根本不懂CSS,只好随便改了.
首先把 footer-meta 的 float: right; 改为 “position:right”,刷新看看
汗,IE6显示正常了,但在FireFox里Meta栏却跑到了下面,.

试试看同时用 float: right; 和position:right
这次FireFox正常,IE6又出问题

换个思路,把三列的Float都改为Left,同时加上Position:relative
结果根本不行,三列变成一列了,汗

这时偶灵机一动,把 footer-meta的Width改为 200px,刷新
IE6和FireFox都显示正常!
现在看来,应该是显示区域问题,导致IE中错位(偶是1024*708分辨率)
另一种解决方法应该是可以把这三列width都改为相对值(33%,33%,33%)

这只是个小问题,但对根本不懂CSS的偶而言,也算一个小麻烦了.
唉,过几天一定找些时间,把 XHTML和CSS系统学习一下.

0 Responses to “IE6下CSS三列定位问题”


Comments are currently closed.