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

尝试使用背景属性而不是内容

#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 回答