これは凶悪……コーディングのヤバいバグ＆仕様　Best5

セイト

2013.07.10

こんにちは。LIGフィリピン支社代表のせいとです。
コーディング中にバグやブラウザ仕様のせいで、「なんじゃこりゃアア」ってなること、皆さんありませんでしょうか。

今回は、その中でもとりわけ「なんじゃこりゃアア具合」が激しいトラブルを、僕の独断と偏見のランキング形式でお話しさせていただきます。
なんでランキング形式にしたかというと、そっちの方が面白いと思ったからです。面白くなかったらごめんなさい。

これは凶悪……コーディングのヤバいバグ＆仕様　Best5

第5位　IE9.jsを入れると、IE7で謎の隙間が発生しまくる

ohno_man
IE9.jsを採用したサイトをIE7,8で見ると、

<class="ie7_anon ie7_class6" id="ie7_pseudo2" style="overflow: hidden; display: block;"/>

こんなものが追記されていたりします。
こいつに高さがあるせいで、隙間が生まれてしまいます。が、こいつがないとHTML5が使えない。。。

解決方法

cssで高さを0に設定するとよいです。

CSS

.ie7_class6{
	height:0 !important;
	}

↑こいつが複数ある場合は全てに「height:0 !important;」を指定する必要があるため、ちょいと厄介です。

第4位　PIEが効かない。

ohno_man2
CSS3未対応のブラウザに一部のCSS3セレクタを適応させてくれる「PIE.htc」ですが、CSSの記述の仕方がちょっと独特です。
普通にCSS書いただけでは反応なし、なんてことも。

解決方法

僕のおすすめは以下の2つを実行することです。

PIE.htcは使わない。PIE.jsを用いる。
背景画像の複数指定は諦める。

PIE.htcはIE9.jsとの併用や、htaccessの設定うんぬんのせいでうまく作動しないことがありました。
PIE.jsだとあっさり動いたので、こっちのがいいと思います。
背景画像の複数指定は1枚目しか表示されなかったり、綺麗に表示できないこともあったので、僕の場合は諦めました。（´・ω・‘）
また、いろんなところで言われている「position:relative」や「zoom:1;」の指定も有効だと思います。場合によっては使っていきませう。

コードの書き方例としては↓こんな感じです。

html

<div class="pie">
かどまる
<div>

CSS

.pie{
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	zoom: 1;
	position:relative;
}

JS

$(function() {
    if (window.PIE) {
        $('.pie').each(function() {
            PIE.attach(this);
        });
    }
})

第3位　iPhone/iPadのSafariで画像が表示されない

ohno_cat
iPhone/iPad版Safariだと表示できる画像のサイズに制限があるそう。（データの形式にもよりますが）
リピートできない背景画像を使用する際は特にご注意を。

解決方法

画像を分割して表示させる、というのが一番でしょう。
背景画像の場合は面倒ですが、分割した上でCSS3の背景の複数指定を使用するのがベスト。

CSS

background: url(../images/bg1.jpg) 0 0 no-repeat, url(../images/bg2.jpg) 0 500px no-repeat, url(../images/bg3.jpg) 0 1000px no-repeat, url(../images/bg4.jpg) 0 1500px no-repeat, url(../images/bg5.jpg) 0 2000px no-repeat;
}

また、CSS3が使えないIE8以下には、↓の方法で対処するといいです。

IE9.jsを使う
PIEを使う
Media Queriesを使ってタブレット用の記述を別で書く

第2位　SNSボタンの「LINE」が消える＆変な位置に吹っ飛ぶ

ohno_lady
SNSボタンの「pocket」と「LINE」を一緒に置くと、「LINE」が変な位置に吹っ飛んだり、姿を消すことがあります。
他のSNSのボタンなど置いても問題はなく、「LINE」だけ吹っ飛ぶようです。LINEかわいそう。

解決方法

「pocket」の

<script>～</script>

部分を</body>タグの直前に記述すると直ります。
なぜこうすると良いかは、弊社CTOでエンジニアのづやさんが丁寧に解説してくれたのですが、よくわからなかったので割愛します。

第1位　WEBフォントとIE9.jsを併用すると、IE8で全体的にヤバいことになる

ohno_granma
正確に言うと、「@font-face」と「IE9.js」を併用すると起こる不具合で、IE8で閲覧すると、フリーズ、リンクが効かない、過度に重くなる、…etcなどの症状が発生します。
また、IE9.jsの代わりにselectivizr.jsを用いても同様の不具合が起こります。
しかもIE9,10の開発ツールでは確認できない現象なので、相当やっかいです。