ie下li标签中span加float:right换行问题解决方法
在IE6，IE7下使用标签时，在加入右浮动样式（float:right）后，会换行的bug解决方案:
bug案例:新闻列表中，为使时间右对齐，加右浮动产生换行
1 2 3 4 5 6 | <ul> <li><a href=“#”>测试</a> <span>2012-12-24</span></li> <li><a href=“#”>测试</a> <span>2012-12-24</span></li> <li><a href=“#”>测试</a> <span>2012-12-24</span></li> <li><a href=“#”>测试</a> <span>2012-12-24</span></li> </ul> |
产生原因分析： Span本身虽然是内联元素，但加上浮动后它就变成了块级元素了，所以才会自动换行，浮动元素的顶端不能高于先于它出现的浮动元素或段落的顶端。
解决方案:
1. span和a标签交换位置
1 2 3 | <ul> <li><span>2012</span><a>BEST SUSHI MENU</a></li> </ul> |
缺点:语义结构发生改变，不合逻辑。
2.a加左浮动，span加右浮动
3.使用IE hack 在span标签中加入只有IE6，7可以识别的样式
1 2 | *margin-top:20px; _margin-top:20px; |
说明，使换行的部分根据margin-top再呈现出来。
4.最佳方案
1 2 | li{position:relative;} li span{position:absolute ;right:0px;} |
注：在li标签中使用positon:relative，在li span中使用absolute绝对定位来使span内容重新定位。
WordPress修改文章摘要长度的方法 Html中href=”#”与href=”javascriptvoid(0)”的区别详解
对于这个问题我要么使用绝对定位，要么使用display:block;后设置宽度进行定位
也行，跟我的第4个方案有区别吗？