博客 » 开源 » Float 和 List Style Image 的 CSS 问题

Float 和 List Style Image 的 CSS 问题

Denis 2008年07月28日

今天把主题修改了下，主要就是把 head 图片换张新的，原来的猪好久了，没有鲜新感了，不好看了，换头新的猪，哈哈。然后把侧边栏加大一点，为什么这么干？这样可以多放点广告，给晨晨多赚钱奶粉钱，虽然现在还没有人找我投放广告，但是我相信会有的，哈哈！ :-)

在把侧边栏加宽的之后，发现侧边栏的分类和友情链接列表太窄了，非常不协调，于是乎就把它改成两栏，代码如下：

#subcontent ul.categories li{
    list-style-image:url(images/categories.gif);
    width:100px;
    float:left;
    margin:2px 0 2px 18px;
}

但是发现在 IE7 中，List-type-image 的图片不会显示出来，于是 Google 之，发现在 IE 中，float 和list-style-image 不兼容，建议使用 background-image 来代替，修改之后的代码如下：

#subcontent ul.categories li{
    background:url(images/categories.gif.gif) no-repeat center left;
    list-style:none;
    width:100px;
    float:left;
    margin:2px 0 2px 0;
    padding-left:18px;
}
标签：
作者：Denis
原文链接：Float 和 List Style Image 的 CSS 问题
我爱水煮鱼版权所有，请勿转载本博客日志到任何博客或论坛。

32 条评论 添加你的评论 →

发表评论

你必须 登陆 之后才能留言。你可以使用以下方式快速登陆我爱水煮鱼：