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

Question

我有两个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输出（如果top是35px）：

这里的CSS问题是什么？

Answer 1

尝试将krc_item设置为position：relative，然后对krc_item_quantity使用position：absolute。这样做之后，您可能需要调整定位。