Vardanaの高さを全角に合わせる : Weblog : SimpleIsm

Vardanaの高さを全角に合わせる

Verdanaを指定すると全角と半角の混合したコンテンツでFirefoxとSafariで表示が異なる - E-riverstyle Vanguard

フォントにVerdanaを指定すると、全角と半角の混合したコンテンツでFxとかSafariで表示が異なるというもの。上記のサイトではline-heightを指定して解決を図っているけどOperaだとちょこっとだけずれるみたい。

全角に合わせるなら、以下のようにbefore疑似要素を使えばOperaでも(自分が調べられる環境では)揃えることができた。半角はひとまずシカト。HTMLとbodyとh2の指定はまんまパクる。

HTML

<h2>Welcome To CSS Design！！</h2>
<h2>What's New!!</h2>

CSS

body {
   font-family: "Verdana", "Arial", "Meiryo", "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka", "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
   font-size: 62.5%;
}

h2 {
   margin: 10px 0 10px 10px;
   padding-bottom: 5px;
   border-bottom: 3px solid #add8e6;
   float: left;
   color: #8b0000;
   font-weight: bold;
   font-size: 1.6em;
   letter-spacing: 0.1em;
}

h2:before {
   margin-left: -1em;
   content: "\002003";
}

内容はbefore疑似要素で全角スペース(&emsp;)を指定(16進数をエスケープ)して、1文字分マイナスする。

...まぁそれだけなんだけど。一応表示確認。