注册 | 登录 忘记密码? 51cto首页 | 博客 | 论坛 | 招聘
热点文章 科普系列之-使用Windows的..
 帮助

关于列表项标记图片垂直居中的解决办法


2008-01-30 17:36:14
今天做一个列表时,偶想使列表的列表项标记为红色实心圆,但使用list-style-type:disc;color:red使后面的文字也变成了红色,于是只能用图片解决了,偶的写法是list-style:url(aa.gif) inside;然后分别在ff和ie下浏览效果。
在ie下效果如下图:
点击在新窗口中浏览此图片



在ff下效果图:
点击在新窗口中浏览此图片



发现问题了!在ie下图片比文字位置高出一部分。在ff下浏览正常!
最后在经典上得到某朋友的帮忙,解决了问题。

方法是:用背景模拟list-style-image解决。

写法如下:
#news_list ul li{margin-left:5px;padding-left:10px;background:url(images/index_d.jpg) center left no-repeat}
使图片水平居左,垂直居中,然后设定其padding和margin即可。在ff下和ie下效果都正常!
唉,ie 的bug真多。。

还有一个问题在css中如果设定ul li{list-style-type:none},则在后面无论怎么设置单独的某个列表list-style-type都不能在ie下看到效果!所以如果后面某个地方要用列表项标记,不要在前面为所有li定义list-style-type:none.




    文章评论
 
 

发表评论

昵   称:
验证码:  点击图片可刷新验证码  博客过2级,无需填写验证码
内   容: