html图片距离浏览器多少,css – 浏览器/操作系统中不一致的图标字体间距

我在垂直对齐entypo图标字体时遇到了很多麻烦.

以下是目前在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浏览器似乎都是通过添加一个行高：5px并去掉顶部值来解决的.

有没有人经历过带有图标字体的浏览器之间的线高度不一致并知道修复？操作系统似乎与此有关,而不仅仅是浏览器的不一致.

我尝试了各种技巧,如负边距,绝对/相对定位,但无法获得一致的结果.

谢谢

附：这已在最新的Mac OS和Windows 8上的所有最新版本的浏览器上进行了测试

如果您无法查看链接,请输入以下代码…

HTML

Clothing

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%}