0

以下に示すように、2 つの div 要素があります。最初の 1 つはページの読み込み時に存在し、2 番目の 1 つは 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;
}

2 つの DIV は構造的には同じですが、なぜ表示が異なるのでしょうか。この問題は Chrome でのみ発生します。Firefox では正しく表示されます。top プロパティを 0 に変更すると、Chrome の出力は次のようになります。

ここに画像の説明を入力

通常の Firefox 出力 (top が 35px の場合):

ここに画像の説明を入力

ここでCSSの問題は何ですか？

4

1 に答える 1

1

krc_item を position:relative に設定してから、krc_item_quantity に position:absolute を使用してみてください。その後、おそらく位置を調整する必要があります。

于 2013-01-13T06:37:57.697 に答える