《双陈记》情侣博客

位置:主页 > 前端设计 > ie6(ie7)float:right换行问题

ie6(ie7)float:right换行问题

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>

css代码:

li {position:relative;width:200px;border:1px solid #000;}

li span{position:absolute;right:0px;}

简易效果图:

ie6(ie7)float:right换行问题



无觅相关文章插件

已经有14位童鞋留言了,还不来盖楼!

  1. 前排,ie就是麻烦

  2. 你老婆挺漂亮~~~

  3. 其实对付ie6有绝招,搜一下ie8.js

  4. 这是个不错的方法。

  5. 还是绝对定位兼容性好点

  6. […] 来自:http://love730.com/ie6ie7floatright.html […]

  7. […] 这篇文章:ie6(ie7)float:right换行问题介绍了通过postion来相对定位解决。 编程技术css, float:right, ie, ie6, ie7, […]

  8. 海星

    谢谢分享,解决了我遇到的问题。 :grin:

love730.com
To:双陈记

 疑问 冷笑 悲伤 坏蛋 感叹 微笑 脸红 大笑 吃惊 惊讶 困惑 酷 大声笑 恼火 古怪

您还可以输入300个字插入图片