0

3 つのボタンがある 1 つの画像にリンクを配置しました (このようなもの)。

ポジショニングは 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

head タグで他のブラウザのレイアウトを損なうことなく、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]-->
于 2014-08-27T08:08:43.143 に答える