css - 如何在 IE6 上将背景图像放置在较长的 链接上

Question

我对链接的背景有疑问。对于我的考试，这必须适用于 IE 6 以下的所有浏览器。问题是我使用的背景图像应该位于链接的左侧，但如果链接长于一行，IE 6 会混淆并定位背景图片居左，而不是左上角...

我使用的是 2colors .gif 图像， anchor 标记的位置如下

<style>
#right-menu {
    float:left; width: 260px; border: 1px solid #e7e7e7; margin-left: 20px;
    padding: 15px 20px;
    background-color: #f6f6f6; min-height: 715px;
}

#right-menu .title {
    font-size: 1.5em; color: #4a493f; font-weight: bold;
}

#right-menu a {
    color: #4b4a41; font-size: 1em; padding-left: 15px;
    background: url(../assets/bullet2.gif) left no-repeat;
    display: inline;     
}
</style>

<div id = "right-menu">
    <h3 class = "title">
        recent comments
    </h3>
    <ul>
        <li>
            <a href = '#' title = 'title'>
                Etiam placerataaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...
            </a>
        </li>
        ...
    </ul>
</div>

如果做不到，我仍然会感谢有人阻止我一次又一次地尝试。

感谢您的宝贵时间!

Answer 1

根据 this article , 几个版本的 IE 在多行内联元素上渲染背景图像时没有做正确的事情。文章中提到了几种可能的解决方法。最简单的看起来是使用 inline-block 作为显示样式，但您可以在本文中查看其他解决方法。

网络上也有很多关于此问题的文章，因此通过正确的 Google 搜索(“内联元素背景图片”)，您可以找到许多其他文章。

您可能还想通过指定顶部和左侧来确保背景图像位于顶部/左侧:

你有这个:

background: url(../assets/bullet2.gif) left no-repeat; 

还不如用这个:

background: url(../assets/bullet2.gif) left top no-repeat;

看起来 top/left 应该是默认的，但是指定你想要的也没什么坏处。