具有相同CSS的元素在Chrome中顯示不同

我有兩個div元素，如下所示。 第一個存在頁面加載時，第二個從jQuery添加。具有相同CSS的元素在Chrome中顯示不同

實時預覽 - http://jsfiddle.net/emaillenin/dhtgX/1/（嘗試在Firefox和Chrome檢查了這一點）

<div class="krc_item"> 
    <span> 
    <img class="cart_pimg ui-draggable" src="xxx"> 
    </span> 
    <div id="krc_item_qty_763" class="krc_item_qty"> 
    1 
    </div> 
</div> 
<div class="krc_item"> 
    <span> 
    <img class="cart_pimg ui-draggable" src="xxxx"> 
    </span> 
    <div id="krc_item_qty_918" class="krc_item_qty"> 
    1 
    </div> 
</div>

以下是相關的CSS：

.krc_item { 
float: right; 
padding-top: 3px; 
width: 70px; 
} 

img.cart_pimg { 
width: 50px; 
height: 50px; 
} 

.krc_item_qty { 
height: 12px; 
position: relative; 
text-align: right; 
top: 35px; 
right: 35px; 
background-color: #FFFFFF; 
border-color: #5A224D; 
border-radius: 14px 14px 14px 14px; 
border-style: solid; 
border-width: 1px; 
color: #000000; 
float: right; 
font-size: 10px; 
font-weight: bold; 
padding: 2px 5px; 
z-index: 100; 
line-height: 12px; 
}

雖然兩個DIV在結構上相同，他們爲什麼顯示方式不同。此問題僅在Chrome中發生。 Firefox正確顯示它。如果我頂屬性更改爲0，在Chrome的輸出是這樣的：

enter image description here