2012-10-10 187 views
0

我想通过添加一个背景,使一个achor标记按钮,虽然它看起来不错,在铬和safari,firefox 15.0.1似乎有一个错误。Firefox的奇怪填充使用锚标记

例如,http://jsfiddle.net/cqVjj/3/显示文本甚至不是垂直居中。我甚至没有指定填充,宽度或高度,但我期望与chrome类似的结果。 Firefox我在底部看到一个空间。

任何解决方案?

铬21.0.1 chrome

火狐15.0.1 firefox

+0

在Chrome和Firefox中对我来说看起来也一样。 – j08691

+0

在这两个浏览器中看起来都一样.. –

+0

检查出添加的图像。它不会出现在你的Firefox 15.0.1浏览器中。如果这有什么不同,我也在osx上。 – Adam

回答

0

简单的解决方法:

你缺少line-height属性。它是相同的值font-size

line-height: 34px;

我更新您的jsfiddle:http://jsfiddle.net/cqVjj/4/

+0

好吧,它使浏览器一致,但它仍然有更多的空间在底部比顶部。我会张贴图片来说明 – Adam

0

这不是通过浏览器一致。我建议你平衡间距与填充。例如参见这里:

http://jsfiddle.net/exzRT/

奇怪的是改变字体像一个sans-serif字体“宋体”帮助。

+0

我使用的是helvetica,这似乎是问题 – Adam

+0

所以我想在这种情况下填充冷凝的作品。 –

0

渲染将取决于浏览器使用的确切字体以及他们决定用于这些字体的确切上升和下降度量。请注意,你甚至不告诉他们在你的小提琴中使用相同的字体系列。

但即使是过去认为,什么CSS2.1已就此事说的是(从http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced):

The height of the content area should be based on the font, but this 
specification does not specify how. A UA may, e.g., use the em-box or 
the maximum ascender and descender of the font. 

我怀疑你正在寻找的浏览器实际上只是用不同的定义内联的内容区域。