整個瀏覽器/操作系統的圖標字體間距不一致

我在垂直對齊entypo圖標字體時遇到了很多麻煩。整個瀏覽器/操作系統的圖標字體間距不一致

這裏是按預期在Safari和Chrome在Mac上目前顯示codepen - http://codepen.io/anon/pen/jJtwz

正如你可以看到右箭頭垂直居中。現在的問題瀏覽器...

Mac的火狐 - 箭頭略低，但能忍受這種

它會出現在以下瀏覽器太低...（每個PC瀏覽器）

的Mac PC歌劇院Chrome PC Firefox PC IE 10 PC IE 9

所有PC瀏覽器似乎都是通過添加行高：5px並擺脫最高價值來解決的。

有沒有人經歷過圖標字體和知道修復的瀏覽器之間的線高度不一致？似乎操作系統與此有關，而不僅僅是瀏覽器不一致。

我嘗試了各種各樣的技巧，如負邊距，絕對/相對定位，但無法獲得一致的結果。

謝謝

P.S.這是對瀏覽器的所有最新版本的測試，在最新的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%}

來源

2013-04-27 Adam