1

この単純なテーブルがあり、最後の行に画像ボタンの横にテキストが表示されています。これは、IE7以外の他のブラウザーでうまく機能します。

<table>
    <tr>
      <td>Some header</td>
      <td>Some other header</td>
    </tr>            
    <tr>
      <td colspan="2" class="infoRow">Info:
      <input type="image" class="infoButton" src="Images/down_arrow.png" /></td>
    </tr>
</table>

CSSファイルから：

.infoButton
{
    float: right;
    padding: 0;
    margin-left: 20px;
}

.infoRow
{
   text-align: right;
}

IE7は、テキストをテーブルセルの右端まで表示し、画像ボタンはその下にあり、右揃えになっています。画像ボタンの左側に「Info：」というテキストを表示したいのですが、これは他のブラウザでも問題なく機能します。

4

4 に答える 4

2

フロートを外せば大丈夫だと思います。

于 2012-07-04T08:28:58.427 に答える
0

入力に適用style="vertical-align:middle;"する（そして削除するfloat）場合、これはIEで機能するはずです。

私はこれをIEのすべてのバージョンで試しましたが、これまでに癖がありましたが、動作するので、コードについては以下を参照してください。

スタイル： .infoButton {vertical-align:middle;padding:0;margin-left:20px;} label {vertical-align:middle;} .infoRow{text-align:right;}

html： <td class="infoRow" valign="middle"><label>Info:</label><input type="image" class="infoButton" src="Images/down_arrow.png" /></td>

于 2012-07-04T09:00:47.963 に答える
0

あなたの情報テキストをラベルタグに入れることをお勧めします。<label>info<label/>これはIE7で機能します

于 2012-07-04T09:49:59.653 に答える
0

IE7 では、左側にテキスト、右側にボタンが表示されています。

「空白:nowrap」のスタイルを td に追加してみてください。

于 2012-07-04T09:23:18.870 に答える