我在垂直对齐一个 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 并去掉 top 值来解决。
有没有人经历过带有图标字体的浏览器之间的行高不一致并知道修复方法？操作系统似乎与此有关，而不仅仅是浏览器的不一致。
我尝试了各种技巧，例如负边距、绝对/相对定位，但无法获得一致的结果。
谢谢
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%}