あまり遭遇しない、5つのマニアックなバグを修正する

150710_001

どのバグもすぐには問題を突き止められず、解決までに数時間~半日を要してしまいました。各ブラウザのレンダリング差異による原因がほとんどですね。

目次

 

IE が「html5.js」を認識しない

発生したブラウザ
IE 7、IE 8
バグの原因
/body 直前に挿入していた。
解決策
head もしくは body 直下に挿入する。

「ページを描画する前に読み込む必要はない」と完全に思い込んでいました…。

 

モダンブラウザがメディアクエリを認識しない

発生したブラウザ
IE 11、Windows版 Safari、Android ブラウザ
バグの原因
解決策
何らかのIEハックを指定するときは、バージョンを指定しないとダメみたいです。しかし、Windows版 SafariとAndroid ブラウザが、なぜバグったのかは謎…。

 

親要素に padding が効かない

発生したブラウザ
Firefox
バグの原因
不明
解決策
子要素全体をブロック要素でネストする。

 

clearfix を指定すると、上部に謎の余白ができる

発生したブラウザ
Firefox
バグの原因
clearfix の display: block;
解決策
display: table; に変更。

 

overflow: hidden; を指定しているのに、float で謎の余白ができる

150710_002

発生したブラウザ
Firefox、Google Chrome
バグの原因
不明
解決策
overflow: hidden; をやめて、clearfix にする。

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。