tdタグにdisplay:bock;を指定するときのchrome、firefoxの動作の違い
2015年9月29日
既存の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。
median.weblike.jp
