android chrome浏览器中的字体大小错误

Question

我的Android手机有html + css的问题（我的环境是Nexus 5，Chrome测试版）。

让我们看看这个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的情况下，span不会扩展以适合其元素（SAMPLE ...）。

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

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

你知道问题是什么吗？我该如何解决这个问题？

非常感谢！

Answer 1

您需要将display的{​​{1}}属性设置为div.sample span 这样可以包装整个内容 我在这里复制了你的问题 - fiddle

设置

inline-block

删除了问题 - fiddle 我怀疑这是由于链接元素上的字体的默认大小，这可能大于span元素的字体大小。