entypo アイコン フォントを垂直方向に揃えるのに苦労しています。
Mac の Safari と Chrome で意図したとおりに表示される codepen は次のとおりです - http://codepen.io/anon/pen/jJtwz
ご覧のとおり、右矢印は垂直方向の中央にあります。今問題のブラウザ...
Mac Firefox - 矢印はわずかに低いですが、これは許容できます
以下のブラウザでは低すぎるように見えます... (すべての PC ブラウザ)
Mac Opera PC Chrome PC Firefox PC IE 10 PC IE 9
すべての PC ブラウザーは、line-height:5px を追加し、上部の値を取り除くことで解決されるようです。
アイコン フォントを使用するブラウザ間で行の高さが一致しないという経験をした人はいますか?修正方法を知っていますか? ブラウザの不一致だけではなく、OS がこれに関係しているようです。
負のマージン、絶対/相対配置など、あらゆる種類のトリックを試しましたが、一貫した結果が得られません。
ありがとう
PS これは、最新の Mac OS および Windows 8 上のすべての最新バージョンのブラウザーでテストされています。
リンクが表示されない場合のコードは次のとおりです...
HTML
<section class="hbox hshop cfix">
<img src="http://placekitten.com/g/600/400">
<h3>Clothing</h3>
</section>
CSS
.hshop > a {
display: block;
border: 1px solid #ccc;
}
.hshop > a >img {
vertical-align: bottom;
padding: 0.75em 0.75em 0;
}
.hshop > a > h3 {
padding: 0.5em 0.6em;
position: relative;
font-weight: normal;
}
.hshop h3:after {
content: '\E766';
font-family: 'entypo';
position: absolute;
right: 0.3em;
font-size: 2em;
top:3px;
}
img {max-width:100%}