「display: table(+display: table-cell)」の表示確認

gfsgfsdf

記事を2カラムとか3カラムで書く方法について検討している中で、「display:table」というのがいいような感じらしいので、さまざまなブラウザでの表示確認をしてみました。

入力したもの

<div style="display:table;width:100%;">
<div style="display:table-cell;background-color:lightblue;width:50%;">
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

</div>
<div style="display:table-cell;background-color:lightyellow;width:50%;">
てすてす
</div>
</div>

表示確認

gfsgfsdf
mac の safari

sgfsgasd
Windows 7 の Google Chrome

agadsfasdf-1
Windows7 の Firefox

dgfadf
Windows7 の IE10

IETester
IE9(by IETester)

IETester-1
IE8(IETester)

IETester-2
IE7(IETester)

agadfa -3
iPad2

adfasfdsa
ipod touch5

考察

表示においては概ね、OK でした。

IE7 と ipod touch5 では、各カラムに対して「display:block;」や「width:100%;」を追加し、1カラムとすることで問題ないような気がする。

参考

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。