最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

[ie6hack]如何解决ie6下li左浮动换行产生的hack

CSS rockyxia 13667浏览 0评论

写在前面

ie6真是一个头疼的问题,让前端人员真的是伤透脑筋,却经常还是无法解决,今天我又一次遇到了一个关于在ie6下li左浮动换行产生的问题,最终没有办法解决,选择放弃了li而采用span标签!悲剧啊,由于本人的水平有限,希望大神能够指点一二啊!接下来我给大家说说我的情况啊,不知道大家在遇到时是怎么解决的呢?

首先直接看源码

html部分:

<div class="xiaoxue">
    <ul>
        <li class="white12">小 学:</li>
        <li><a href="#">优酷网</a></li>
        <li><a href="#">奇艺高清</a></li>
        <li><a href="#">搜狐视频</a></li>
    </ul>
    <ul>
        <li><a href="#">搜狐视频</a></li>
        <li><a href="#">酷6网</a></li>
        <li><a class="red12" href="#">更多>></a></li>
    </ul>
</div>

css部分:

.xiaoxue{width:718px; height:157px; border-bottom:#6DBA2B 2px solid; margin-bottom:11px; background:url(../img/bg-xiaoxue.jpg) no-repeat; padding-left:8px; padding-right:8px;}
.xiaoxue li{ height:29px; padding-left:10px; padding-right:10px; float:left; line-height:29px; /** display:inline; zoom:1;*/}

这样写成的代码,在火狐下面是完全正常的,而在ie6下却发生了杯具,ie7和8我没有测试,不过应该问题不大!接下来看看ie6和火狐下面的截图:

ie6下不正常:

ie6下不正常

火狐下正常的:

火狐下正常的

准备通过一些解决css hack的方法去解决这个问题,但是却无法解决他,相信大家看到我的css代码里最后面的两句注释掉了,那个是用来解决ie6 hack的,但是我取消注释的时候,ie6下仍然还是那样,火狐也还是原先那样,这里我尝试着注释掉了float:left;这句,结果ie6下可以了,达到了原先火狐下的效果,但是火狐下杯具了;然后准备通过ie6下另外调用另一个css来解决这个问题,但是依然无效,其他的几种hack方法也都尝试了,依然无法解决,最终迫于无奈之下只能通过不使用li这种block属性的标签去解决,而改用span这种inline属性的标签,现在可以使ie6和火狐下效果一样了,相信ie7和8也应该没有问题的。知道大家是怎么解决的呢?

通过写下刚才那段话,我突然发现一个问题,我想给li加上inline属性和我现在使用span标签不是同样地意思么?而使用span可以让火狐和ie6效果相同,那不正是解决hack的一种方法么?不知道大家认为我想的对不对哈,欢迎给以指正哈!

由于本人在前端方面还属于一个菜鸟级别,所以有很多css的hack都还不能完美的解决,希望大家多多给予关照哈!

//2013-2-3 补充

我需要所有的li在同一行显示,不固定Li的宽度,如果一行排不下,需要自动换行。当然Li的内容长度不同。

必须在li加white-space:nowrap;

转载请注明:Rockyxia Web技术博客 » [ie6hack]如何解决ie6下li左浮动换行产生的hack
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)