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

150710_001

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

IE が html5.js を認識しない

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

発生したブラウザ: IE 7/8

バグの原因: /body 直前に挿入していた。

解決策: head もしくは body 直下に挿入する。

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

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

発生したブラウザ: IE 11/Windows版 Safari/Android ブラウザ

バグの原因

<!-- [if IE]>
// コード
<![endif]-->

<!-- [if IE]>

// コード

<![endif]-->

解決策

<!-- [if lt IE 9]>
// コード
<![endif]-->

<!-- [if lt IE 9]>

// コード

<![endif]-->

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

親要素に padding が効かない

発生したブラウザ: Firefox

バグの原因: 不明

解決策: 子要素全体をブロック要素でネストする。

clearfix を指定すると上部に謎の余白

発生したブラウザ: Firefox

バグの原因

clearfix の display: block;

content: "";
display: block;
clear: both;

content: "";

display: block;

clear: both;

解決策

display: table; に変更。

content: "";
display: table;
clear: both;

content: "";

display: table;

clear: both;

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

150710_002

<div id="block-main">
<h1>秋のスポーツ大会</h1>
<img src="" alt="">
<dl>
	<dt>開催日時</dt>
	<dd>2015/07/11</dd>
</dl>
</div>

<h1>秋のスポーツ大会</h1>

<dl>

</dl>

</div>

#block-main {
	width: 400px;
	overflow: hidden;
	padding: 10px;
	border: 1px solid #ccc;

	img {
		float: left;
		margin-right: 20px;
	}
}

#block-main {

width: 400px;

overflow: hidden;

padding: 10px;

border: 1px solid #ccc;

img {

float: left;

margin-right: 20px;

}

発生したブラウザ: Firefox/Google Chrome

バグの原因: 不明

解決策: overflow: hidden; をやめて clearfix にする。

鼻ちょうちん

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

IE が html5.js を認識しない

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

親要素に padding が効かない

clearfix を指定すると上部に謎の余白

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

コメントを投稿する返信をキャンセル

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

IE が html5.js を認識しない

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

親要素に padding が効かない

clearfix を指定すると上部に謎の余白

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

コメントを投稿する 返信をキャンセル

コメントを投稿する返信をキャンセル