android - Android Chrome 浏览器中的字体大小错误

Question

我在 Android 手机上遇到 html+css 的问题(我的环境是 Nexus 5，Chrome beta)。

让我们看看这个CSS:

<style type="text/css"><!--
div.sample {
  margin: 12px 2px 12px 2px;
}
div.sample span {
  padding: 2px 2px 2px 2px;
  border: 3px solid #f00;
  background-color: #fcc;
}
--></style>

正文部分(html):

<div class="sample"><span>SAMPLE SAMPLE SAMPLE</span></div>
<div class="sample"><span><a>SAMPLE SAMPLE SAMPLE</a></span></div>
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test

添加“测试测试...”部分来激活webkit的“字体增强”。

问题是我们期望第一个 div (SAMPLE...) 看起来与第二个 div (SAMPLE...) 类似，但是，它看起来像这样:

在第二个 div 情况下，跨度不会扩展以适合其元素(SAMPLE...)。

如果我们在 a 标签外部添加一些文本，两个 div 看起来是一样的。

<div class="sample"><span>SAMPLE<a>SAMPLE SAMPLE SAMPLE</a></span></div>

你知道问题出在哪里吗？我该如何解决这个问题？

非常感谢!

Answer 1

您需要将 div.sample span 的 display 属性设置为 inline-block。
这将能够包装您的整个内容。
我在这里重现了您的问题 - fiddle

设置

div.sample span {
    padding: 2px 2px 2px 2px;
    border: 3px solid #f00;
    background-color: #fcc;
    display:inline-block;
}   

解决了问题 - fiddle .
我怀疑这是由于链接元素上的默认字体大小所致，该默认大小可能大于 span 元素的字体大小。