1

我发现 Chrome 添加填充到 span 标签的方式不一致。当使用带有小字体大小和文本的简单 span 标签时，上方和下方的填充比 Internet Explorer 中的要大。当使用大字体时，填充是相同的。

这可以使用以下代码/jsfiddle 进行测试

<span>Testing A Text</span>
<span>Testing A Text</span>

body
{    
    font-family: Helvetica,Arial,"Sans Serif";
    font-size: 10px;
}
span
{
     border: 1px solid red;   
}
span:last-child
{
    font-size: 200%;
}

（可以在这里预览：http: //jsfiddle.net/gR9em/5/）

当然，这可以通过有条件的 CSS 或使用不同的字体来解决，但如果可能的话，这是我想避免的事情。这可能与“Arial”相关......但是，任何人都可以解释这一点并提供解决方案吗？或者这是一个已知的浏览器 CSS“错误”？

此处带有图像的示例：

预习

4

2 回答 2

0

I don't believe the issue is related to padding, but rather line-height.

Example with correct padding: http://jsfiddle.net/qh3aY/1/

Ideally you would set up the line-height on the <body> but I wanted to follow the OPs markup.

IIRC, <span> elements should always be inside another element like a <p>.

于 2013-11-06T09:55:02.263 回答
0

我在 Chrome 中再次测试了 jsFiddle，似乎文本下方的填充消失了，并且文本上方的填充比我发布此问题时要少。也许在 Chrome 中更新了一些东西。

我想理想情况下，不同浏览器之间的 line-height 应该不会有不同的工作方式......

于 2015-02-09T14:03:16.590 回答