在屏幕上显示div

我正在试图制作一个小商店地图，并在其上显示商店中的位置。我已经使用jQuery创建了它，并且它在Chrome中非常完美。然而，在Firefox和Internet Explorer中，指针位于地图后面，不可能看到指针。我知道指针在那里，因为我可以使用Firebug来看它。在屏幕上显示div

这是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）被推到地图后面？谢谢。

来源

2012-12-08 Jerodev

' />'那是什么？ – Popnoodles

尝试使用完全关闭标记。 – Popnoodles

对不起，该网站是用jsp制作的，这是我们自己创建的标签。那些不是问题。 – Jerodev

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

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

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

来源

2012-12-08 20:57:30

作品像一个魅力，谢谢你！ – Jerodev

该问题最有可能是无效的标记，你使用：

<div id="mapMarker" />

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

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

纠正这一点，它应该管用。 Chrome在解释无效标记方面非常出色，Firefox和IE都不太好。还有一些其他错误，例如：

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

和

<div class="spacing" />

来源

2012-12-08 20:05:32

如果我关闭div标签，那么指针不会在任何浏览器中显示。 – Jerodev

这并不意味着这个答案是错误的（因为它给了你正确的建议）。 – Popnoodles

@Jerodev，够公平的，但这并不意味着你不应该使用有效的标记。尝试把你在一个jsfiddle中，我会看看 –

在屏幕上显示div

回答

相关问题