HTML・CSS・JavaScriptのテクニック集
各ブラウザ（主にIE）の不具合（バグ）対策や応用テクニックをご紹介します。
不具合（バグ）対策
HTML
- IE6でXML宣言をすると互換モードになる
- IE7以下で文字が一部複製される
- IE8以下でtable要素のcolspan/rowspan属性が削除できない
- title要素の文字が文字化けする
- IE9～11でmain要素にCSSを適用しても効かない
CSS
- IE6でfloatと同じ方向にmarginを適用すると2倍marginが反映される
- IE6以下でHTML4.01で構築している場合、指定したwidthがborderとpaddingを含んだ値になる
- IE7以下でdisplay:inline-block;に対応していない
- IE7以下で、ある要素に隣接する要素にCSSが適用されない
- hasLayoutプロパティによるIE6～7のバグ回避
- IE7以下でz-indexが効かない
- IE7で子要素と同じ要素が隣接し、隣接セレクタと全称セレクタを組み合わせると子要素のみに指定しているCSSが隣接している要素に適用される
- IE8で透過レイヤーの要素にマウスオーバーが効かない
- IE10でdisplay:flexboxを使用しているときに文字が折り返されず横にはみ出る
- IE11でbackgroundを使用して画像を指定していると画像がぼける
- IE11でjustfy-contentが効かない
- IE8～IE11でdisplay:table-cell内の連続したハイフンが折り返されない
- IE9～IE11でtransformにcalcを使用すると無視される
- IE9～IE11でcalc関数を指定しても段落ちする
- IE9～IE11でborder-radiusで0以外の値を指定すると1pxほどの余白が上下に発生する
- IE9～11でbox-shadowのinsetとborder-radiusを組み合わせると角丸が太くなる
- IE10とIE11でgradient関数とcalc関数を組み合わせると描画がおかしくなる
- IE10とIE11でtransitionの変化する値にcalc関数を使用するとアニメーションが無効になる
- IE10とIE11でtable要素内でflex-wrapが効かない
- IE10とIE11でflex-directionを指定すると高さがなくなる
- IEでword-wrap:break-wordを指定しても折り返されない
- 横並び（float）の要素で要素同士にmargin-rightなどで余白を指定した場合に（幅を超えて）右端だけ折り返される
- ある要素の子要素にimg要素を使用した場合に下部に余白が発生する
- iOS Safariで、絶対位置指定している要素がスクロール中に絶対位置にならない
- iOS Safariで、絶対配置指定している要素内でスクロールができないことがある
- iOSでinput要素などの入力欄にフォーカスしキーボードが表示されたとき、position:fixedされている要素の位置がおかしくなる不具合
- iOS Safariでbackground-attachment:fixedが効かない不具合
- iOS Safariでiframe要素の高さが広がってのスクロールができない
- Webkit（iOS SafariやChromeなど）で、:checked擬似クラスと2つ以上の隣接セレクター指定が効かない
- 要素がちらつく
JavaScript
- jQueryの$.GetScriptを使用してJSを読み込もうとすると、IEで読み込みに失敗する
- jQueryの$.ajaxや$.loadなどでファイルを読み込むと文字化けが発生する
- jQueryのFadeInやslideDownでopacityの操作をすると、IE8以下で効果を付けた要素内のテキストがギザギザになる
- IE10とIE11でinputイベントとplaceholder属性がある場合inputイベントが意図しないタイミングで発火する
- IE10とIE11でXMLHTTPRequestを使ってリクエストした際にInvalidStateErrorが発生する
- IE10とIE11でXMLHTTPRequestのresponseTypeにjsonを指定してもresponseがオブジェクトにならない
その他
- IE10、IE11、Windows 8 Edgeでページ全体のスクロールバーがコンテンツと重なる
- IE9～IE11でmain要素に指定してあるCSSが一部効かない
- IE7でIE7用のスターハックが効かなくなる
- IE10やIE11、Edgeでダブルタップによる拡大を無効化
- button要素をactiveな状態にするとIEで文字が1px右下に寄る
- iPhoneやiPadで重なっている背景で裏側の背景がコンマ数px見えてしまう
- iOSでform要素にtarget="_blank"が指定されているとinput要素でEnterキーによる送信（submit）が効かない
- iOS7以下のSafariでスクロール中にイベントが発火しない
- Safari9以下でFlexアイテム内にある高さが100%にならない
応用技
CSS
- 横並びレイアウト
- CSSのみで横並びの要素の高さを揃える
- 要素の上下（垂直）中央揃え
- 固定+リキッドレイアウト
- リストなどへの罫線の付け方
- ハンバーガーメニューのアイコンをCSSで作る
- IE7、IE8でnth-child(n)のように指定する方法
- br要素の改行を無効にする
- 親要素からはみ出してmarginが適用される対策
- Flexアイテムの一部をスクロール可能にする
- テーブルのセルにtext-overflowプロパティを使う
- CSSのみでテキストのアンダーラインのアニメーション
- マウスオーバーの罫線アニメーション
- スマートフォンなど幅を超えるテーブル要素にスクロールを付ける
- 子要素の個数でスタイルを変更する
- マウスオーバー時のグラデーションのアニメーション
- カードレイアウトのマウスオーバー（ホバー）のアニメーション
- ランブル／シェイクを実装する方法
- CSSのbackgroundに画像を直接埋め込む方法
- 枠線をグラデーションで装飾
- ol要素の子孫要素へ親の番号を引き継いでのナンバリング
- CSSで波のようなアニメーション
その他
- フォームでdisplayをnoneに設定しても送信される
- フォームでdisabled属性を指定すると送信されない
- jQueryの$.cookieで指定のCookieが存在しないときundefinedの場合とnullの場合で返ってくる場合がある
- 擬似要素（::before、::after）のcontentプロパティで日本語など文字化けすることがある