Webアプリ作ってて、普段Firefoxで見てて上手くいってたのが、IEでは表示が崩れてちょこっとはまった話。
自分は普段HTML+CSS書かないので、Webデザイナーの人ならほんと当たり前の知識だろうということはわかってる上で。
HTMLを直接いじりながら配置を修正してたので、下記のような感じのHTMLを書いて中の数字をいじっていました。
<div class="roundbox" style="overflow:auto;width:380;height:260">
これ、Firefoxだと普通に期待通りの大きさになってくれます。
が、IEだとぜんぜん効いてくれないんです。
実は「width:380」とかの数字の後ろ、単位の「px」が抜けているせいです。
これだとIEは指定を無視してしまいまうんですね。
あと、twitterが提供しているbootstrapというCSSフレームワークを使ったのですが、これもFirefoxやChromeだと角丸になってくれるんですが、IEだと丸くならずでした。
なんで？と思ったんですが、実はbootstrapのデモ画面で見てもやっぱりIEだと角丸になってませんでした。
bootstrapはtwitterが自分ところで使ってるもののはずです。
そこでIEでtwitterのページを開いてみると、やっぱりボタンやメニューが角丸にはなっていませんでした。
twitterの中の人も結構割り切って作ってんだなあ。
