endless pulse

どっくんどっくんふるえる毎日を過ごしています

クロスブラウザ的なあれ

かいはつ

最近とあるWebページを作るお手伝いをさせていただいているのだけれど、楽しくChrome for Mac OSで開発していたら、案の定「他のブラウザで崩れてるよ」と言われてしまった。
４月から就職して、そのお仕事でWebページを触ることがあるかどうかはわからないけど、自分でこういうことは趣味で続けて行きたいなーと思うのでおぼえがき。

Firefox

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ではやたらと延びている。なんだこれ。