input要素ではなくbutton要素を使用 フォーム部品であるsubmitボタンに対して、通常は画像で実装するような細かい装飾を行いたいとき、input要素では限界があります。 なぜならinput要素は子要素をとることができないためです。 たとえばこんなsubmitボタン…

<meta name="viewport" content="width=device-width">が無視される 最新版のIE（特にWindowsPhoneやSurfaceなどのモバイル端末）において、viewportの指定が無視されることがあります。 すなわち、viewportのサイズが端末の画面サイズではなく、端末の解像度そのままになってしまい、モバイルなのに大画面用のス</meta>…

font-sizeに起因 画像を縦に積み上げるように配置した際に、隙間ができてしまうことがあります。 特にIE6/7で現れる現象です。 IEでは著名なバグのようで、vertica-align:bottomだけでは直りません。 font-sizeに起因する現象のようです。 imgに以下のスタイ…

background-sizeに起因 CSS3ではグラデーションをスタイルシートで設定できるようになりましたが、まれに端末によっては、下図のように意図しない表示をしてしまうときがあります。 もしbackgroundプロパティでグラデーションを実装している場合、（たとえCS…

floatさせた要素は親要素におさまりきらない場合、自動的にカラム落ちしますが、IE6/7において意図しない挙動をすることがあります。 たとえばカラム落ちせずに次の行の先頭へ改行してしまったり、次の行にもいかずにテーブルのセルのように幅がとても狭くな…

ブラウザごとに限界値がある background-imageで巨大なサイズの画像を読み込ませるとき、ブラウザによっては表示できなかったり、イレギュラーな表示をする場合があります。 リピートさせずに表示させたいとき、Safari(iOS)とFirefoxは要注意。 特にSafariで…