使用不同的样式表进行IE支持，而不会破坏头标记

Question

我将链接定位在一个有3个按钮的图像上（类似this）。

该定位适用于Firefox和Chrom，但是我最喜欢的＆＃34; IE（11）..好吧..我看到图像上的链接是一个看不见的非常小的角色。如果我是用户，我不会注意到它，并认为该链接不起作用。

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

HTML（在此代码之前有一个＆＃34; lps＆＃34;类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浏览器的情况下解决问题？

Answer 1

接受

的答案

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

Answer 2

使用不同的样式表进行IE支持，而不会破坏头标记

中的其他浏览器布局

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

为什么IE不支持我的CSS定位

2 个答案:

使用不同的样式表进行IE支持，而不会破坏头标记