Internet Explorer 中的字体大小不同 [英] Font size in Internet Explorer is different

问题描述

我有以下 css

html {
  font-size: 62.5%; // 100% is 16px, this value will 10px
}

当我在所有其他浏览器中检查页面上的文本时，它给了我 10px.但是 Internet Explorer 11 给出了 9.93px.

when I am checking the text on the page in every other browser, it gives me 10px. But Internet Explorer 11 gives 9.93px.

据我所知，它正在发生，因为 IE 截断小数值，实际上将我的属性解释为 font-size: 62%.

As I understand, it is happening, because IE truncates fractional values, interpreting my property actually as font-size: 62%.

这是一个演示，您可以尝试:https://jsfiddle.net/vcod81vy/

Here is a demo, that you can try: https://jsfiddle.net/vcod81vy/

你有什么想法可以让我保持一致吗?

Do you have any ideas how can I make it consistent?

附言我不能使用硬编码的 10px 值，因为我需要构建可访问的 Web 界面，该界面支持浏览器设置中的字体覆盖，如这里

P.S. I can't use hard-coded 10px value, because I have a requirement to build accessible web interface that supports font overrides from browser settings, like it is described here

推荐答案

根据 http://msdn.microsoft.com/en-us/library/ms530759(v=vs.85).aspx 接受浮点值.

如果此行为在最新的 IE 版本中仍然存在，请尝试使用 calc().

If this behavior is still existing in latest IE versions, try using calc().

找到的解决方案是:font-size: calc(10em/16)

calc() 没有任何缺点，只是旧版浏览器可能无法很好地支持它.

There is no downside to calc() except that older browsers might not support it very well.

这篇关于Internet Explorer 中的字体大小不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！