问题

I positioned links on one image which has 3 buttons, (something like this).

The positioning works with Firefox and Chrom, but with my "favorite" IE(11).. well.. I see the link on the image as an invisible very small character. If I was a user, I wouldn't notice it and think the link isn't working.

I can't publish my real code, but I will change the names in it.

HTML (there is a "lps" class div before this code):

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

Only the relevant 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;
}

What can be the cause of the problem and how can I fix it without ruining it on the Firefox and Chrome browsers?

回答1:

Answer to accept

Instead of placing invincible elements over sprite image, use background-image as that sprite and just change background-position for each element. That way you can put any size spacing between elements, no matter of spaces between sprite images.

回答2:

use a different stylesheet for IE support without ruining other browsers layout in head tag

            <!--[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]-->

来源：https://stackoverflow.com/questions/25521854/why-ie-doesnt-support-my-css-positioning

标签

html