0

IE7 では、注文サンプル ボタン「#itmSampl」は、その左側にある「.add-to-cart」ボタンと垂直方向に整列していませんが、FF3.6 と Chrome 5 では整列しています。IE6-8で正しく配置する必要があります。誰かが私が見逃しているものを見ていますか?

<style type="text/css">
#buttonbox { position:relative; width:326px; }

#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#accounting #box-accounting .image-item .content-account
#ordrWizrd { float:left; height:24px; width:111px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#itmSampl { bottom:0; cursor:pointer; display:block; height:24px; margin:0 3px 2px; position:absolute; right:0; width:120px; } .clearfix { clear:both; height:0; } </style>

<div id="buttonbox">
    <div id="addtocart2" class="add-to-cart">
    <table><%=getCurrentAttribute('item','addtocarthtml')%></table>
    </div>
    <div id="ordrWizrd" class="add-to-cart"><a href="javascript:shwWizd()"><img src="/images/img/add-to-cart.gif" alt="configure item"></a></div>     
    <div id="itmSampl"></div>
    </div>  <div class="clearfix"></div> </div>

また、ビジュアルが役立つ場合のテスト ページは次のとおりです (箇条書きリストの代わりにボタンを表示するには、ログインする必要があります): http://www.avaline.com/85W_test_2 ログイン:test2@gmail.com パス:test03

4

1 に答える 1

1

解決策1：ページですでに多くのテーブルを使用しているので、別のテーブルが問題になることはありません。HTMLを上記のものから次のようなものに変更するだけです（いくつかの調整が必要な場合があります）。

<div id="buttonbox">
    <div id="addtocart2" class="add-to-cart">
        <table><tr>
            <td><table><%=getCurrentAttribute('item','addtocarthtml')%></table></td>
            <td valign="bottom"><div id="itmSampl"></div></td>
        </tr></table>
    </div>
    <div class="clearfix"></div>
</div>
<!-- And also put #ordrWizrd in there somewhere -->

解決策2：#itmSamplを使用して「position：absolute」のものをすべて削除します（CSSのbottom、position、right、および場合によってはmarginとheight / widthのプロパティを削除します）。次に、CSSfloat: right; margin-top: -36px;を#itmSamplに追加して、右側にフロートさせ、36ピクセル上に移動します。

于 2010-08-11T18:21:38.730 に答える