マルチブラウザとは

アプリケーションが様々なブラウザ上でも同じ動作をすること。
クロスブラウザともほぼ同義であり、マルチブラウザはアプリケーションの製作者が推奨するブラウザで動作することを保証しクロスブラウザは全てのブラウザで動作することを保証することを意味する。

マルチブラウザ対策の５つの方法

　1. cssハック

cssハックとは
ブラウザごとに適応させるcssを変えること

css

/* IE11のみ適応 */@mediaalland(-ms-high-contrast:none){*::-ms-backdrop,.selector{/* 適用したいスタイル */}}/* FireFoxのみ適用 */@-moz-documenturl-prefix(){/* 適用したいスタイル */}/* Chrome、Safari、Operaのみ適用 */@mediascreenand(-webkit-min-device-pixel-ratio:0){/* 適用したいスタイル（Chrome、Safari、Operaのみ適用） */}

　2. リセットcssの使用

リセットcssとは

ブラウザでは、デフォルトの余白やフォントの大きさを定義しているため、各ブラウザによってデザインの表示が変わってしまうことがある。
この差異を無くすためにデフォルトで適応されているcssをリセットするためのもの

リセットCSSの読み込み方は、下記の記述をhead内に記述する

html

<!DOCTYPE html><htmllang="jp"><head><metacharset="UTF-8"><linkrel="stylesheet"href="パス/reset.css"><title>Document</title></head>

　3. cssの記述法

padding, margin, borderなど要素ごとのレンダリングは、全てのブラウザで異なる。
なのでcssの記述に工夫が必要

css

/* 横幅が100pxもしくは150pxとブラウザによって表示が変わってしまう */div{width:100px;padding-left:50px;}/* widthとpaddingを分けて記述すればどのブラウザでも同じ幅で表示される */div{width:100px;}divp{padding-left:50px;}