firefox テーブル内の画像のオーバーフロー対策

このコンテンツの内容

「画像を横並べしたい」などの目的で、table要素を使う事があると思います。
レイアウト目的でtable要素を使うのは、おすすめではありませんが、CSSの知識がない人には、html要素だけで、簡単に横並びを実現できるので、利用する人も少なくないと思います。

ただ、WordPressでこの方法を使った場合、firefoxブラウザで閲覧すると、レイアウトが壊れることがあります。


Firefox を利用して、テーブル要素内に画像を置くと、max-widthなどのプロパティーがうまく動作せず。原寸で画像が表示されるため、コンテンツ領域からはみ出してしまう

という問題について、

table-layout: fixed;

を使って、max-widthが有効になるスタイルを書きましょう。

という内容です。

Twentytwelveなどの標準テーマでも、はみだしますので、対策をおすすめします

再現用のコード

<table>
 <tr>
 <td><img src="http://www.tenman.info/study/css/images/example.jpg" alt="firefox overflow test image" />
 </td>
 <td>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </td>
 </tr>
</table>

max-widthが有効に働く事を確認するためのサンプル

[emulsion_relate_posts]