在屏幕上顯示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

回答

相關問題