2

画像の上に空の（ちょっと）アンカー要素を配置することで、IE9（および8）に問題があります。アンカーにはテキストが含まれていますが、CSS の text-indent プロパティを使用してページから開始されています。

私は、一連のプロモーション パネルがあるサイトに取り組んでいます。それらはすべて UL に含まれています。各 LI 内にはプロモーション画像があり、1 つ以上のアンカー要素がそのさまざまな領域に配置されています。IMG 要素と A 要素は、絶対的に LI 要素に配置されます。したがって、基本構造は UL > LI > IMG AA A のようになります。

この設定は Firefox と Chrome では問題なく動作しますが、IE では好ましくありません。このセットアップで z-index を使用してみましたが、うまくいきませんでした。

IE が抱えている問題を説明し、CSS のより良い解決策を提供できる人はいますか? div、img、および単一のアンカーを使用して、問題の簡単な/単純化された例を作成しました。これをコピーしてマシンに貼り付けて、動作を確認できます。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta name="Description" content="" />
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <link type="text/css" rel="stylesheet" href="" />
        <style type="text/css">
            #div {
                z-index:1;
                display: block;
                background:red;
                position:relative;
            }
            #image {
                z-index:2;
                position:absolute;
                top:0;
                left:0;
                display:block;
            }
            #anchor {
                z-index:3;
                display:block;
                overflow:hidden;
                position: absolute;
                top:0;
                left:0;
                text-indent:-9999px;
                width:640px;
                height:480px;
            }
        </style>
    </head>
    <body>
        <div id="div">
            <img id="image" src="http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg" />
            <a href="#" id="anchor">clicky</a>
        </div>
    </body>
</html>

UL > LI > IMG A のレイアウトをあまり制御できません。これは、新しいプロモーションを取得すると、画像を簡単に更新できるように設定されており、画像に含まれる「行動喚起」の数に応じてアンカーを簡単に追加または削除できます. A 要素の配置はインラインで挿入されます。

ありがとう！

4

3 に答える 3

2

同じ問題がありました。あなたの例を使用して、これが私の解決策です：

<style type="text/css">
    #div {
        position:relative;
    }
    #anchor {
        display:block;
        width:640px;
        height:480px;
        overflow:hidden;
        text-indent:-9999px;
        position:absolute;
        top:0;
        left:0;
        background:url(http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg) no-repeat 640px 480px;
    }
</style>

<div id="div">
    <img id="image" src="http://farm8.staticflickr.com/7130/7438112718_2e8340081b_z.jpg" />
    <a href="#" id="anchor">clicky</a>
</div>

アンカー タグには幅と高さが設定されており、オーバーフローが非表示になっているため、アンカー タグの背景画像を、絶対に配置されている画像 (または既に含まれている画像) に設定しますが、背景位置を正のピクセル値より大きい値に設定します。アンカーの幅と高さ、および背景の繰り返しよりも繰り返しなし。これにより、アンカー タグは IE で機能し、ブラウザは余分なリソースをダウンロードしないため、帯域幅を節約できます。注: img タグには特別なスタイルは必要ありません。含まれている div には相対的な位置のみが必要です。

background-position の設定について心配したくない場合、動的に生成される画像のサイズを制御できない場合、および/または帯域幅の節約を気にしない場合は、小さな (1x1 ) 透明/透明な画像 (必要に応じて背景の繰り返しを設定します)。

または、Billy Moat のフィドルの例を拡張します: http://jsfiddle.net/7NpLq/29/

于 2013-01-10T19:40:35.487 に答える
1

ここで必要なものを実現するために、プレーンな古い HTML イメージ マップを使用できると思います。

http://www.w3schools.com/tags/tag_map.asp

そうでなければ、あなたが最初にやろうとしていたと私が思うことをしているフィドルがあります：

http://fiddle.jshell.net/7NpLq/

于 2012-07-28T18:19:31.957 に答える
0

This issue affects IE10 as well, but not IE11. An alternative to the background image approach is to apply background-color: rgba(0, 0, 0, 0); to the anchor. Note that this won't work in IE8, which doesn't support rgba colors.

于 2015-02-10T12:13:17.927 に答える