【问题标题】:weird behaviour when using 'em' and percentage使用“em”和百分比时的奇怪行为
【发布时间】:2012-12-10 06:35:49
【问题描述】:

我正在构建一个响应式网站,我想为此使用 new css3 unit - rem

我已将 html 标记上的基本字体大小设置为 1rem,即 16px,然后将正文设置为 62.5%,这应该是 10px,但在查看计算样式时chrome控制台,我看到正文font-size:12px

我尝试使用0.625em 设置正文,但结果仍然相同,我错过了什么?

您可以在此处查看示例:http://jsfiddle.net/pPmBm/2/

编辑:

刚刚在 FF 上测试,似乎工作正常,所以这似乎是一个 chrome 问题。

【问题讨论】:

  • 嗨,我刚刚检查了你的 jsfidle,它看起来还不错:HTML 的字体大小为 16px,body 将其覆盖为 62.5%,body 的字体大小符合预期。
  • 我在你的小提琴中看不到任何 rems 或 ems。你链接错了吗?
  • 请注意,rem 值在html 的字体大小之后采用,无论您设置什么度量单位,所以如果html 是16px,那么1rem 总是等于16px。
  • 不,但关键是,即使在我开始使用任何字体大小之前,我也无法让正文大小合适,无论如何我已经更新了小提琴
  • 我使用的是 Chrome 23/winXP 并且 jsfiddle 的大小正确:10px。当然,您还没有使用 rem 单位。

标签: html css em


【解决方案1】:

我以前从未与rem 合作过,但看看你链接的网站,你好像把它翻过来了:

html { font-size: 62.5%; } 
body { font-size: 1rem; } /* =10px */

【讨论】:

  • 我尝试了任何你想要的方式,但我一直看到font-size:12px,看看我发布的示例并使用它,看看你是否可以达到10px。
  • 它看起来像 chrom 中的一个错误,当我查看计算样式选项卡时,我看到 font-size:12px' even on the div defined as 10px` 所以我猜实际大小是 10px,它只是一个小故障。
  • 我使用的是 Chrome 24.0.1312.45 beta-m,在我的计算样式选项卡中一切正常。
  • 我的是版本 23.0.1271.97 m,所以我想我应该升级。
猜你喜欢
  • 2013-11-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-01-20
  • 1970-01-01
  • 2017-06-06
  • 2017-06-19
  • 1970-01-01
相关资源
最近更新 更多