Question

我在垂直对齐entypo图标字体方面遇到了很多麻烦。

以下是目前在Safari上展示的codepen和Mac上的Chrome - http://codepen.io/anon/pen/jJtwz

如您所见，右箭头垂直居中。现在问题浏览器......

Mac Firefox - 箭头略低但可以容忍此

在以下浏览器中显得过低......（每台PC浏览器）

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

Answer 1

这是一个entypo问题。它们的字形周围的间距导致了这个问题。我使用了来自fontello的图标字体，这有效http://codepen.io/anon/pen/sidje

Answer 2

entypo字体仍然存在不一致之处。在所有图标字体中。

我找到的最佳解决方案是设置基线字体大小，并使用字体指标，直到获得半稳定的内容匹配基本字体指标是一个良好的开端。如果您保持相同大小的图标，此方法效果最佳-font，改变大小会引发一切。

当我将行高设置为比字体大小稍小时，IE的反应也更好。

真的很草率，但它让我足够接近。

Answer 3

我修复了字体垂直空间oiand，使其可用https://github.com/zenx/entypo

整个浏览器/操作系统中的图标字体间距不一致

3 个答案: