レイアウト修正

特定のブラウザでレイアウトが崩れる

特定のブラウザでレイアウトが崩れる場合はCSSハックを利用します。
ただし、最近のCSSハックはidとclassに対してしか指定できないようです。
CSSハックについて
OS、ブラウザごとのCSSハックなどまとめ
Chromeのみ、Firefoxのみに適用させるCSSハック
IE11のみをCSSハックする方法

特定のページだけレイアウトが崩れる

特定のページだけレイアウトが崩れる場合は、そのページだけHTMLにstyleを指定すると解決できます。

<head>
<style>要素 {スタイル}</style>
</head>

フォント修正

フォント調整

ブラウザによってフォントがおかしくなった時に調整する方法です。
基本的には以下のようにCSSハックを使用しますが、赤字の部分は各自の環境に合わせて修正してください。

Chrome:@media screen and (-webkit-min-device-pixel-ratio:0) {#container {font-family:"MS Pゴシック";font-size:99%;}}
Firefox(57以降):@-moz-document url-prefix() {#container {font-family:"MS Pゴシック";font-size:99%;}}
IE(10以降):@media all and (-ms-high-contrast:none){#container {font-family:"MS Pゴシック";font-size:99%;}}

文字コード調整

Chromeで表示した時だけ文字化けする場合は、HTMLのヘッダで文字コードを指定してください。

<meta charset="UTF-8">

オンラインPC館
トップページテクニックウェブ制作 → レイアウト修正