最近とあるWebページを作るお手伝いをさせていただいているのだけれど、楽しくChrome for Mac OSで開発していたら、案の定「他のブラウザで崩れてるよ」と言われてしまった。
４月から就職して、そのお仕事でWebページを触ることがあるかどうかはわからないけど、自分でこういうことは趣味で続けて行きたいなーと思うのでおぼえがき。
imgタグがインライン要素として扱われる
ChromeやSafariではimgタグはどうやらインライン-ブロック要素として扱われるらしく、ブロック要素へのcssの指定がちゃんと効くのだけど、
Firefoxでは、空っぽのimgタグにcssでwidthやheightを指定してもその分の幅も高さもとってくれなかった。
ダミーのイメージを必ず用意しておくか、imgタグではなくimgの外側を必ずdivあたりで囲んで、そこにwidthやheight指定をしないといけないみたい。
InternetExplorer
margin:autoが効かない
IEで表示したらがったがたになってしまった大きな要因。margin:0px auto;みたいな設定をcssに行うことに寄るブロック要素のセンタリングが効かない。。
角丸ができない
ブロック要素の角を丸くしたい、みたいな仕様だったのだけど、cssでの角を丸くする設定は、IEには対応してない様子。
上記のページには、JSを使うようにと書いてあるけれど、このライブラリを適用したらFirefoxなどでの表示も崩れてしまったので放置することにした。うーむ。
divのheightがやたらとでかい
divの下に影みたいにして2pxとか1pxとかの灰色背景にしたdivを置いておいたら、IEではやたらと延びている。なんだこれ。
