Float 和 List Style Image 的 CSS 问题

Denis

发布于 2023-04-14 14:53:18

6370

发布于 2023-04-14 14:53:18

今天把主题修改了下，主要就是把 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;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css