当前位置:首页 » 前端 » 本页

ie下li标签中span加float:right不换行问题解决方案 In 前端  @2012-09-04 5,101 Vs

在IE6,IE7下使用标签时,在加入右浮动样式(float:right)后,会换行的bug解决方案:
bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行

产生原因分析: Span本身虽然是内联元素,但加上浮动后它就变成了块级元素了,所以才会自动换行,浮动元素的顶端不能高于先于它出现的浮动元素或段落的顶端。 解决方案: 1. span和a标签交换位置.

缺点:语义结构发生改变,不合逻辑.
2.
a加左浮动,span加右浮动
3.
使用IE hack 在span标签中加入只有IE6,7可以识别的样式

*margin-top:20px;
_margin-top:20px;

说明,使换行的部分根据margin-top再呈现出来.
4.最佳方案

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

注:在li标签中使用positon:relative,在li span中使用absolute绝对定位来使span内容重新定位。



打签» , ,   评论» 4枚

↓↓↓ 支持我们 ↓↓↓



已经有 4 枚评论. 发表 »

我说两句 »

Ctrl+Enter

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。
返回顶部