您的位置:博客首页 >> 程序源码 >> IE6 ul list-style text-overflow font-size

IE6 ul list-style text-overflow font-size

日志编号:200 发表时间: 2015-06-06 23:06:20 关注次数:2310
    标题采用了关键字形式,原因是我实在想不出该用什么标题。此问题为:设置ul显示list-style样式,并使li内文字过长时通过text-overflow:ellipsis截取显示。
    虽然IE6\IE7用户越来越少,少到占比都不到2%了,但本着服务大众原则,能解决还是搞一下为好。
问题很好解决,不过也因为IE6的原因碰到了难题,先看最终解决方法:

ul{padding:10px;*display:inline-block;}
ul li{width:180px;*width:160px;
overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;
font-size:10px;
list-style:square inside none;
}

要点:
1、设置list-style:square\disc在overflow:hidden时,需要添加list-style-position:inside即list-style:square inside才能显示样式。具体翻阅CSS手册。
2、ul设置padding时,会使li在IE6下显示莫名其妙,所以要在ul中添加*display:inline-block及li中*width:160px(比180px宽要短)。
3、IE6\7不支持font-size更改ul样式大小,这个没办法,只能换图片。
本站不提供讨论功能。
本站所有非新闻类文章均为原创,且禁止转载。
本站为了获得更多流量赚取广告费,难免会有以次充好的文章,望见谅,勿鄙视。