what a wonderful world

ずっと気になっていたのですが、さっき調べたら意外と簡単に対処できることがわかりましたのでメモしておきます。

“○” とか “×” などの記号はブラウザで表示するとほかの文字よりひとまわり小さくなってしまうことがあります。
これを回避するにはページ制作時に次のようにします。

スタイルシートのはじめに

@charset "utf-8";

と記述します。
もちろんそのスタイルシートはUTF-8で記述します。

次にそのスタイルシートに

body {
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

と書きます。

要するにブラウザが日本語の書体を使っていないので小さく表示されてしまうということみたいです。

参考
meisui8: 記号文字のフォントサイズが小さいのはなぜか
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 – webデザイナーのナナメガキ

リストのマーカーを画像にしたいとき、list-style-imageを使うと位置がうまくそろわない場合が多いので、背景にイメージを敷いてpadding-left を少し広く空けて代用したりします。

そんなときに困るのが、リストの折り返し。

リストの中身が折り返したとき、マーカーの下に折り返したテキストが入り込んでしまいます。

これを回避するには、「display: inline-block;」。

liタグに指定します。

コンテンツの高さが表示ウィンドウの高さに達していないとき、Firefoxでは、ウィンドウ右端にあるスクロールバーが表示されない。
これを常に表示するには

html{overflow-y:scroll;}

とする。

これでページによって表示がずれたように見えるのは防げる。