IE6 中 float:right 后换行的问题昨天遇到一个小问题,在写一个功能列表介绍的页面css里面使用了float:right,在蛋疼的IE6(加上ie7)里面都出现了杯具的换行错位了,第一行最右边的掉到第二行去了。以前也遇到过此类问题诸如以下html代码,要让<span>2012-12-24</span>的位置出现在最右边。以前用过的方法是吧<span></span>和<a></a>相互调了个位置,效果是实现了,不过这样就影响了xhtml的语义,不科学啊。也用过让<a></a>float:left,让<span></span>float:right,这样也可以实现,不过在没有<a></a>的情况下,就需要特意加一个<a></a>,这样也不是很好,好像这样双浮动的Ie6里会出现几px的空白,也不是很好。这次用了一个定位的方法,在父标签<li>里面设置position:relative,在<span>里面设置position:absolute;right:0px;这样效果还不错。例如下面代码:
html代码:
<ul>
<li><a href=“#”>title1</a> <span>2012-12-24</span></li>
<li><a href=“#”>title2</a> <span>2012-12-24</span></li>
<li><a href=“#”>title3</a> <span>2012-12-24</span></li>
<li><a href=“#”>titler</a> <span>2012-12-24</span></li>
</ul>
<li><a href=“#”>title1</a> <span>2012-12-24</span></li>
<li><a href=“#”>title2</a> <span>2012-12-24</span></li>
<li><a href=“#”>title3</a> <span>2012-12-24</span></li>
<li><a href=“#”>titler</a> <span>2012-12-24</span></li>
</ul>
css代码:
li {position:relative;width:200px;border:1px solid #000;}
li span{position:absolute;right:0px;}
简易效果图:
前排,ie就是麻烦
ie看着就蛋疼啊
你老婆挺漂亮~~~
哈哈,你把我们两个都夸了一遍啊
其实对付ie6有绝招,搜一下ie8.js
以前试过这个ie8.js貌似有的问题还是不能完全解决,而且又要多个Js,又多点鸭梨啊
这是个不错的方法。
希望有需求的时候能派上用场
还是绝对定位兼容性好点
的确如此
[…] 来自:http://love730.com/ie6ie7floatright.html […]
[…] 这篇文章:ie6(ie7)float:right换行问题介绍了通过postion来相对定位解决。 编程技术css, float:right, ie, ie6, ie7, […]
谢谢分享,解决了我遇到的问题。
不客气哈