Question

我正在尝试制作一个小商店地图，其上有一个指针，显示商店中的位置。我使用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）被推到地图后面的原因？感谢。

Answer 1

尝试使用后台属性，而不是内容

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

在Firefox http://jsfiddle.net/3xZuF/7/中正常工作（但尚未在IE中测试）

Answer 2

问题很可能是您使用的无效标记：

<div id="mapMarker" />

这不是有效的HTML，你需要像这样关闭div：

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

纠正这个并且应该有效。 Chrome非常擅长解释无效标记，firefox和IE不太好。还有一些其他错误，例如：

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

和

<div class="spacing" />

在图像上显示div

2 个答案: