menu
スポンサーリンク

tdタグにdisplay:bock;を指定するときのchrome、firefoxの動作の違い


既存のtableタグで作られたサイトをレスポンシブ仕様にする業務がありました。既存のhtmlはできるだけいじりたくないのでcssをコーディングしてレスポンシブ化していったのですが、


のように、セルが2列でならんでいるデザインの場合、スマホ閲覧時には1列にしたかったので、

td{
display:block;
}

と指定し、縦一列に並ぶよう指定しました。
(もう少し適切な記述があるかもしれません。)

firefoxでは想定どおりにレイアウトできたのですが、chromeではなぜかうまくいきませんでした。
1時間くらい悩みましたが、原因は「HTML 4.01 Transitional」と「XHTML 1.0 Transitional」の指定の違いでした。
chromeだと、htmlが「HTML 4.01 Transitional」指定だと、tdタグに「display:block;」指定が効きません。より厳格なhtml仕様である「XHTML 1.0 Transitional」指定だと、上記cssが効きました。



PS.
そもそも、レスポンシブ仕様なら本来「html5」仕様にするべきなんでしょうがw。

連絡先など

MAIL mailmedian.weblike.jp
Skype median-weblike
所在地 埼玉県坂戸市

スポンサーリンク
スポンサーリンク

blog

プラットフォーム API 言語