【问题标题】：Why IE doesn't support my CSS positioning为什么 IE 不支持我的 CSS 定位
【发布时间】：2014-10-20 17:24:23
【问题描述】：

我在一张有 3 个按钮的图片上放置了链接（类似于this）。

该定位适用于 Firefox 和 Chrom，但适用于我“最喜欢的”IE(11).. 好吧.. 我看到图像上的链接是一个不可见的非常小的字符。如果我是用户，我不会注意到它并认为链接不起作用。

我无法发布我的真实代码，但我会更改其中的名称。

HTML（这段代码之前有一个“lps”类div）：

<img src="http://example.ag/nts/images/category/subcat/btns.jpg" style="margin-top: 25px;
margin-bottom: 35px;">

<div class="promotioncontent">
    <a class="how modal_link" href="#">&nbsp;</a>

    <div class="term" style="display: none;">
        <div class="termcontent">
            <div class="termheader"><h3>WORK</h3><a href="#" class="a_close"></a>
            </div>

                <div class="termtext">
                    <img src="http://example.ag/nts/images/category/subcat/work.jpg">
                    <a class="openprize opennext" href="#"></a>
                </div>
        </div>
    </div>
        <a class="prize modal_link" href="#">&nbsp;</a>
        <div class="term" style="display: none;">
            <div class="termcontent">
                <div class="termheader"><h3> TABLES</h3><a href="#" class="a_close"></a>
                </div>
                <div class="termtext">
                    <img src="http://example.ag/nts/images/category/subcat/tables.jpg">
                    <a class="openfaq opennext" href="#"></a>
                </div>
            </div>
        </div>

        <a class="faqs modal_link" href="#">&nbsp;</a>
        <div class="term" style="display: none;">
            <div class="termcontent">
                <div class="termheader"><h3>FAQs</h3><a href="#" class="a_close"></a>
                </div>
                <div class="termtext">
                    <img src="http://example.ag/nts/images/category/subcat/FAQ.jpg">
                </div>
            </div>
    </div>

</div>

只有相关的 CSS：

.lps a.how {
    right: 50%;
    margin-right: 189px;
}

.lps a.modal_link {
    position: absolute;
    bottom: 70px;
    display: block;
    width: 233px;
    height: 76px;
    text-decoration: none;
}

问题的原因是什么？如何在不破坏 Firefox 和 Chrome 浏览器的情况下修复它？

【问题讨论】：

你为什么不使用精灵？您的链接指向精灵图像，每个元素都有相同的background-image，但有不同的background-position
@Justinas 这是一个选项，但我现在不想过多更改代码。
您最好编写更复杂的代码而不是“最佳实践”？你正在建造的房子打算倒塌并仍在继续，因为你已经开始了......
嗯，这是一个有人让我工作的网站，总的来说，它的构建很糟糕，而且我无法访问该网站的大部分文件，也无法访问FTP。我尝试了几种方法来修复定位，但没有任何效果，所以我认为我将开始研究 sprite。我现在的问题是它使用了在单击对象内部对象中的对象时激活的 JS，并且我无权使用 js 编辑任何内容。除非我自己做一个，否则这不会是高效和糟糕的 SEO。我猜这是一个熟悉的问题，人们知道如何解决它。
@Justinas 嗨，最后，我使用带有背景图像的 div 而不是图像，并且它有效。非常感谢：）！

标签： html css internet-explorer browser-support

【解决方案1】：

回答接受

不要在精灵图像上放置无敌元素，而是使用background-image作为精灵并为每个元素更改background-position。这样，您可以在元素之间放置任意大小的间距，而不管精灵图像之间的间距如何。

【讨论】：

【解决方案2】：

为 IE 支持使用不同的样式表，而不会破坏 head 标签中的其他浏览器布局

            <!--[if IE]>
            According to the conditional comment this is IE<br />
            <![endif]-->
            <!--[if IE 6]>
            According to the conditional comment this is IE 6<br />
            <![endif]-->
            <!--[if IE 7]>

            <![endif]-->
            <!--[if IE 8]>
            According to the conditional comment this is IE 8<br />
            <![endif]-->
            <!--[if IE 9]>
            According to the conditional comment this is IE 9<br />
            <![endif]-->


            <!--[if gte IE 8]>
            <link href="ie7.css" rel="stylesheet" type="text/css" />


            <![endif]-->




            <!--[if lt IE 9]>
            According to the conditional comment this is IE lower than 9<br />
            <![endif]-->
            <!--[if lte IE 7]>
            According to the conditional comment this is IE lower or equal to 7<br />
            <![endif]-->
            <!--[if gt IE 6]>
            According to the conditional comment this is IE greater than 6<br />
            <![endif]-->
            <!--[if !IE]> -->
            According to the conditional comment this is not IE 5-9<br />
            <!-- <![endif]-->
            </p>
            <!--[if gte IE 8]>
            <style>
            body
            {
            background:Red;
            }
            </style>
            <![endif]-->

            <!--[if gte IE 7]>
            <script>
              alert("Congratulations! You are running Internet Explorer 7 or a later version of Internet Explorer.");
            </script>
            <p>Thank you for closing the message box.</p>
            <![endif]-->

【讨论】：