Chrome span标记中的填充不一致

时间：2013-11-06 09:30:51

标签： google-chrome padding html

我发现Chrome在填充标记时添加填充的方式不一致。使用具有较小字体大小和文本的简单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“bug”？

图片示例：

Preview

2 个答案:

答案 0 :(得分：0)

我不相信这个问题与填充有关，而是与行高有关。

正确填充的示例：http://jsfiddle.net/qh3aY/1/

理想情况下，您需要在line-height上设置<body>，但我想遵循O​​P标记。

IIRC，<span>元素应始终位于<p>之类的另一个元素中。

答案 1 :(得分：0)

我已经在Chrome中再次测试了jsFiddle，看起来文本下方的填充消失了，文本上方的填充比我发布此问题时的填充要少。也许在Chrome中更新了一些内容。

我想理想情况下，不同浏览器之间的行高应该不同...

相关问题
最新问题