我有两个 div 元素，如下所示。第一个在页面加载时存在，第二个是从 jQuery 添加的。
实时预览 - 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 正确显示它。如果我将 top 属性更改为 0，Chrome 中的输出是这样的：
通常的 Firefox 输出（如果顶部是 35px）：
这里的 CSS 问题是什么？