CSS：顯示絕對定位的元素在鍍鉻

所以我有以下的CSS該位置被設置爲一個範圍標記的圖像：CSS：顯示絕對定位的元素在鍍鉻

.dc-mega-icon { 
    background-image: url(...); 
    display: inline-block; 
    position: absolute; 
    top: 18px; 
    width: 16px; 
    background-repeat: no-repeat; 
    display: inline-block; 
    height: 14px; 
    margin-left: 5px; 
}

HTML：

<li class="liMenuItem" id="itemLogout"> 

    <a href="#" class="menuItem dc-mega"> 
     <span class="menuIcon">&nbsp;</span> 
     My Profile 
     <span class="dc-mega-icon"></span> 
    </a> 

    <div class="sub-container non-mega"> 
     <ul id="CCMenuOptions" class="sub" style="display: none;"> 
      <li class="mySupport"><a href="#">Dashboard</a></li> 
      <li class="mySupport"><a href="#">My Support</a></li> 
     </ul> 
    </div> 

</li>

在Firefox/IE的箭頭顯示正確：

enter image description here

IN CHROME箭頭是顯示ED上的綠色圖標頂部左側的：

enter image description here

爲什麼會出現這種情況？我注意到，在其他基於WEbkit的brosers中，如Opera和Safari，這隻會在Chrome中發生。

來源

2013-11-20 Eric Bergman

我無法在Chrome中重現該問題。可以做一個[jsfiddle]（http://jsfiddle.net/）來演示？ – showdev

老實說，通過顯示內聯塊（兩次，我可能會添加）顯示某些東西的麻煩是沒有意義的，只能立即將它定位。我建議放棄絕對位置，以便在文本旁邊正確排列元素。考慮使用絕對位置作爲從文檔流中刪除某些內容的方式，這是您不希望遵守頁面流的正常規則的一種方式。這個箭頭當然不會顯示在頁面流之外，因此請嘗試更新邊距，填充和行高以使其首先工作。 –

在我看來，Chrome瀏覽器顯示正確。默認情況下，position: absolute將顯示元素top: 0，left: 0。你根本不用左右移動位置。嘗試添加right: 0，看看會發生什麼。父元素上還需要position: relative;。

來源

2013-11-21 02:11:52 brouxhaha

CSS：顯示絕對定位的元素在鍍鉻

回答

相關問題