0

ここに簡単な例があります: http://jsfiddle.net/V97TF/1/。基本的に、画像の上にリンクを絶対に配置する必要がありますが、何らかの理由でz-indexがどのIEでも機能しません:(誰か助けてください?

前もって感謝します！

コード：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <style>
        #map {
            float:left;
            position:relative;
        }
        #map img {
            position:relative;
            z-index:9;
        }
        #map .links {
            position:absolute;
            width:100%;
            height:100%;
            z-index:10;
            top:0;
            left:0;
        }
        #map .links li {
            width:60px;
            height:25px;
            position:absolute;
        }
        #map .links a {
            display:block;
            height:100%;
            width:100%;
        }
        .karlovy-vary { left:41px; top:87px; }
        .plzen { left:60px; top:143px; }
        .usti-nad-labem { left:110px; top:42px; }
        .ceske-budejovice { left:130px; top:226px; }
        .liberec { left:193px; top:34px; }
        .hradec-kralove { left:243px; top:88px; }
        .pardubice { left:244px; top:132px; }
        .jihlava { left:241px; top:183px; }
        .brno { left:314px; top:210px; }
        .olomouc { left:353px; top:156px; }
        .zlin { left:397px; top:204px; }
        .ostrava { left:400px; top:134px; }
       </style>
</head>
<body>
    <div id="map">
       <img src="http://placekitten.com/501/291">
       <ul class="links map1">
            <li class="karlovy-vary"><a href="#"></a></li>
            <li class="plzen"><a href="#"></a></li>
            <li class="usti-nad-labem"><a href="#"></a></li>
            <li class="ceske-budejovice"><a href="#"></a></li>
            <li class="liberec"><a href="#"></a></li>
            <li class="hradec-kralove"><a href="#"></a></li>
            <li class="pardubice"><a href="#"></a></li>
            <li class="jihlava"><a href="#"></a></li>
            <li class="brno"><a href="#"></a></li>
            <li class="olomouc"><a href="#"></a></li>
            <li class="zlin"><a href="#"></a></li>
            <li class="ostrava"><a href="#"></a></li>
        </ul>
    </div>   
</body>
</html>
4

1 に答える 1

0

background-imageハックを使用して Internet Explorer 8 で動作させることができました(この質問への回答を参照してください)。この特定のケースでは、透明な背景画像が機能していないようです。私はmdmullinaxのソリューションが好きでした：

background-color: #fff;
filter: alpha(opacity=0);

ただし、アンカーのコンテンツを表示する必要がある場合は、Dio F のソリューションのいずれかを使用できます。

background-image: url("about:blank");

ただし、このソリューションを使用すると、about:blankドキュメントの MIME タイプが間違っているため、Chrome で MIME タイプの警告が表示されると Dio F 氏は述べています。

また、少なくとも Internet Explorer 8 では、 と の両方に境界線を配置する#map .links liと、リンクがリスト項目とまったく同じ位置にないことがわかります。これは、 に追加することで修正できます。#map .links aposition: absolute;#map .links a

于 2013-02-12T05:33:17.617 に答える