0

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

该定位适用于 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 浏览器的情况下修复它？

4

2 回答 2

3

回答接受

与其在精灵图像上放置无敌元素，background-image不如将其用作该精灵并background-position为每个元素进行更改。这样，您可以在元素之间放置任何大小的间距，无论精灵图像之间的空间如何。

于 2014-08-28T08:18:40.803 回答
0

为 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]-->
于 2014-08-27T08:08:43.143 回答