如何在更长的<a> link on IE6</a>上定位背景图片

Question

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

我正在使用2colors .gif图像，锚标记位于以下

<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;

看起来顶部/左边应该是默认值，但指定你想要的东西并没什么坏处。