1

ここに、アイコン、タイトル、説明を表示するテーブルがあります。概略は次のとおりです。

      | Title
 icon | -------------------
      | Description

このレイアウトを生成する関連 HTML コードは次のとおりです。

<table><tbody>
<tr>
  <td rowspan="2"><img style="margin-right: 2.0em;" src="icon.png"></td>
  <td valign="top"><h2>Title goes here</h2></td>
</tr>
<tr>
  <td valign="bottom"><b>
    description description description description description description description extra text extra text extra text extra text
  </b></td>
</tr>
...
</tbody></table>

このテーブルは、Chrome では次のようになります。

Chrome で壊れたテーブル

説明からテキストを削除すると、表は適切な外観に戻ります。

Chrome でそれほど壊れていないテーブル

ただし、まったく同じテーブルが常に Firefox で正しく表示されます。

Firefox で壊れたことがない

WebKit はアイコンを尊重しないようmargin-rightですが、Firefox は尊重します。td説明とbタグのスタイルを変更して試してみましたが、効果はdisplayありoverflowませんでした。私も変更margin-rightしましpadding-rightたが、効果はありません。

WebKit にアイコンの を尊重させるにはどうすればよいmargin-rightですか?

Web サイトの CSS フレームワークとして Twitter Bootstrap を使用しています。このテーブルには Bootstrap の CSS を使用していません。

4

1 に答える 1