2

店内の場所を示すポインターが付いた小さな店の地図を作成しようとしています。これはjQueryを使用して作成しましたが、Chromeで完全に機能します。しかし、FirefoxとInternet Explorerでは、ポインターはマップの後ろに配置されており、ポインターを表示することはできません。Firebugを使用してポインターを確認できるため、ポインターがそこにあることがわかります。

これは私が使用するhtmlコードです：

<div id="container">
    <table>
        <tr>
            <td>Location in store</td>
        </tr>
        <tr>
            <td>
                <img src="../../maps/${department.getMap()}" id="map" />
                <div id="mapMarker" />
            </td>
        </tr>
    </table>
    <div class="spacing" />
</div>

css：

#map
{
    display: block;
    position: relative;
    z-index: 2;
}

#mapMarker
{
    width: 32px;
    height: 32px;
    position: absolute;
    display: block;

    z-index: 3;
    content: url("../images/MapMarker.png");
}

そしてjQueryコード：

$(document).ready(function() {
    //Set the marker on the map.
    $("#mapMarker")
        .css({
            "left":     25,
            "top":      25
        })
        .show();
});

私のポインター（#mapMarker）がマップの後ろに押し出される理由を理解できる人はいますか？ありがとう。

4

2 に答える 2

1

コンテンツの代わりにbackgroundプロパティを使用してみてください

#mapMaker {
    ...
    background: transparent url("../images/MapMarker.png") left top no-repeat;
    ...
}

Firefox http://jsfiddle.net/3xZuF/7/で正常に動作します（ただし、IEではまだテストされていません）

于 2012-12-08T20:57:30.547 に答える
0

問題はおそらく無効なマークアップです。使用しているのは次のとおりです。

<div id="mapMarker" />

これは有効なHTMLではありません。次のようにdivを閉じる必要があります。

<div id="mapMarker"></div>

これを修正すると、機能するはずです。Chromeは無効なマークアップの解釈にかなり優れていますが、FirefoxとIEはそれほど優れていません。他にもいくつかのエラーがあります。たとえば、次のとおりです。

<td <JnJ:lang name="LocationInStore" /> />

と

<div class="spacing" />
于 2012-12-08T20:05:32.707 に答える