0

私は、mozilla と IE(7 および 8) の両方で開発したアプリケーションをテストしています。IE のボタン レイアウト以外はすべて機能します。

IE で:

ここに画像の説明を入力

Mozilla の場合:

ここに画像の説明を入力

そのため、mozilla では期待どおりに動作しますが、IE では壊れます。

ボタンをレンダリングするために次のコードを使用しています。

<tr style="display:block;">
    <td align="left">
       <input type="submit" name="Continue" value="Continue" class="btn-red" style="height: 2.0em; width: 95px; font-size: 13px; cursor: pointer;" />
    </td>
    <td align="left">
    <a href="#" class="btn-gray" style="height: 1.1em;">Cancel</a>
    </td>
</tr>

編集 ：

CSS :

赤いボタン:

input.btn-red {
    background: url("https://www.mySite.com/images/red_btn.gif") repeat-x scroll center bottom #D02727;
    border: 2px solid #CE6268;
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    height: auto;
    margin: 10px 10px 10px 0;
    padding: 4px 30px 0.5em;
    text-align: center;
    text-decoration: none;
    width: auto;
}

灰色のボタン:

a.btn-gray {
    background: url("https://www.mySite.com/images/gray_btn.gif") repeat-x scroll center bottom #B7BDB5;
    border: 2px solid #B2B8B1;
    color: #000000;
    float: left;
    font-size: 13px;
    font-weight: bold;
    margin: 10px 10px 10px 0;
    padding: 4px 30px;
    text-align: center;
    text-decoration: none;
    width: 40px;
}

IE で適切に動作させる方法を提案できますか?

4

1 に答える 1

1

わかりました、これをチェックしてください。http://jsfiddle.net/9QEGU/4/

私はちょっとコードをクリーンアップし.btn、スタイルを少し統一するために両方のボタンにクラスを追加し、ほとんどの場合、テーブルから不要な 2 番目のセルを削除しました。基本的に、IE でテーブルが伸びていたため、ボタン ホルダー (td) が幅の 50% になり、大きなギャップが生じていました。一般的に言えば、ボタンのホルダーとしてテーブルを回避することを検討する必要があると思いますが、それはこの問題とは関係ありません。それでも、単純な div で十分です。

とにかく、ここにあります。さらに質問がある場合は、お気軽にお問い合わせください:)

<table>
<tr>
    <td align="left">
       <input type="submit" name="Continue" value="Continue" class="btn btn-red" />
        <a href="#" class="btn btn-gray">Cancel</a>
    </td>
</tr>
</table>

.btn {
    font-weight: bold;
    font-size: 13px;
    height: 30px;
    width:100px;
    margin: 10px 10px 10px 0;
    text-align: center;
    float:left;
    display:block;
}

input.btn-red {
    background: url("https://www.mySite.com/images/red_btn.gif") repeat-x scroll center bottom #D02727;
    border: 2px solid #CE6268;
    color: #FFFFFF;
}

a.btn-gray {
    background: url("https://www.mySite.com/images/gray_btn.gif") repeat-x scroll center bottom #B7BDB5;
    color: #000000;
    text-decoration: none;
    line-height:30px;
}
于 2013-06-13T14:21:03.413 に答える