如何在 IE6 上的较长 <a> 链接上定位背景图像答案

【问题标题】：How to position background image on a longer <a> link on IE6如何在 IE6 上的较长 <a> 链接上定位背景图像
【发布时间】：2012-07-14 11:26:28
【问题描述】：

我对链接的背景有疑问。对于我的考试，这必须适用于 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>

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

感谢您的宝贵时间！

【问题讨论】：

你需要支持IE 6吗？浏览器已有十多年的历史，充满了安全漏洞，通常会使 css 和 html 变得一团糟。我们在 6 年前就放弃了对 IE 的支持，并且没有收到任何投诉。如果我是你，我真的会质疑支持 IE 6 的必要性，这就像说你必须支持 Netscape Navigator。
你试过背景：url(../assets/bullet2.gif) top left no-repeat; IE6 在这一点上很古老，我不羡慕你的任务。
@Namphibian 遗憾的是，一些公司环境仍然有 IE6——没有太多的公司将自己与 Netscape 联系在一起。我想我们中的许多人甚至已经放弃了对 IE7 的支持。
谢谢大家！ PlexQ 做到了。 Final我要么支持IE6，要么做响应式设计，老师根本没有解释。

标签： css html background-image internet-explorer-6

【解决方案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 应该是默认设置，但指定您想要的内容并没有什么坏处。

【讨论】：