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

【问题标题】：Font size bug in android chrome browserandroid chrome浏览器中的字体大小错误
【发布时间】：2015-01-07 13:20:28
【问题描述】：

我在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

添加了“test test ...”部分来激活webkit的“字体提升”。

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

在第二种 div 情况下，跨度不会扩展以适应其元素（SAMPLE...）。

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

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

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

非常感谢！

【问题讨论】：

那么，你需要第一个 div.sample 看起来像第二个 div.sample 吗？我问的原因是，第二个在我看来实际上已经坏了，因为它的背景跨度并没有包含它的全部内容。
不，我希望第二个 div.sample 看起来像第一个 div.sample。第二个对我不好。
还有一件事 - 这就是你的 CSS 吗？它是什么安卓版本？尝试设置.sample span a { display: inline-block }或.sample span a { display: block }
我使用桌面谷歌浏览器来识别问题，但我不能。我的安卓是 5.0.0。

标签： android html css

【解决方案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.
我怀疑这是由于 link 元素上的默认字体大小，它可能大于 span 元素的 font-size。

【讨论】：

太棒了！ display:inline-block; 真的解决了我的问题。谢谢！