浏览器在同一属性上加载带有 px 的速记 CSS 和带有 rem 的特定 css？答案

【问题标题】：Browser loads both shorthand CSS with px, and specific css with rem on same property?浏览器在同一属性上加载带有 px 的速记 CSS 和带有 rem 的特定 css？
【发布时间】：2013-04-21 19:40:11
【问题描述】：

我已经开始在一个新站点上使用带有 PX 后备的 REM 单元。现在，我有一个可能很愚蠢的问题，但我找不到任何具体提及它的内容，所以我将继续在这里提问。

使用属性简写和特定属性似乎都 ~~load~~ 在 ~~浏览器~~ Chrome 中生效。

body{ font:16px/23px sans-serif;
      font-size:1rem;
      line-height:1.438; }

而同时使用速记或同时使用两个特定属性会取消其中一个或另一个（例如，使用主要或后备，而不是两者）

body{ font-family:sans-serif;
      font-size:16px; font-size:1rem;
      line-height:23px; line-height:1.438; }

或

body{ font:16px/23px sans-serif;
      font:1rem/1.438 sans-serif; }

现在哪个才是最佳实践？所有示例均有效。速记和特定属性都加载到 ~~浏览器~~ Chrome 中是否有原因，即使它们的目标是相同的属性？他们实际上都在加载吗？这对浏览器/设备如何呈现样式有任何不利影响吗？

~~我只通过 Chrome 研究过这个问题，~~我无法通过测试辨别出任何差异。但是，您可以看到，如果您必须对所有使用 rem 的元素使用相同代码的两次迭代，这将是多么的笨重。

更新： 仅在以下所有浏览器的最新版本中测试，所有测试都与第一个代码sn-p有关

在 Firefox 中，这似乎不是问题，它只是将速记代码中的字体大小/行高替换为 rem 大小。在 IE、safari 和 Opera 中，它采用简码并将其分离为特定属性，但仍会加载 rem 单位而忽略 px 单位。

它似乎是特定于 Chrome 的，至少在现代版本中是这样。所以现在的问题是，如何弄清楚 Chrome 是如何处理它的？显示在这篇文章底部的图像可能会解释更多。看看这两个字体属性是如何加载的，既没有被忽略也没有优先权？

更新#2： 使用边距时，Chrome 会正常运行。我将使用以下“离墙”示例进行演示：

margin:16px 0 19px 0;
margin-top:1rem;
margin-bottom:1.188rem;

在 chrome 中读取为：

margin:1em 0 1.188rem 0;

_{（来源：leftdeaf.com）}

【问题讨论】：

你说的“加载”是什么意思？是“生效”的意思吗？在这种情况下，Firefox 似乎表现正确，因为这似乎是一个简单的级联问题。（为什么它在 Chrome 的 Web Inspector 中显示 line-height: 1.438 而不是代码中所述的 line-height: 1.438rem，这超出了我的理解。）
@BoltClock，是的，我的意思是生效，或者用作主要（rem）或回退到次要（px）。一个应该覆盖另一个。我只想用特定属性（例如font-size:1em;）修改速记font:500 16px/23px sans-serif; 中的字体大小。类似的例子是使用速记margin:0 16px 0 0;，只有右边距和margin-right:1rem;。但正如 Xarcell 所提到的，我只需要以相同的方式重写它，一个为 px，一个为 rem，如下所示：margin:0 16px 0 0; margin:0 1rem 0 0; 或 margin-right:16px; margin-right:1rem; 重复，但有效。
另外，行高最后没有显示“rem”是因为我在阅读meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights 之后更新了那个样式表，在截图之前。我现在也在这里更新了，很抱歉造成混乱。

标签： css google-chrome font-size

【解决方案1】：

这两个资源将回答您的所有问题：

http://snook.ca/archives/html_and_css/font-size-with-rem

http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

使用 line-height，使用单位，而不是值：

身体{ 字体：16px/23px 无衬线；字体：1rem sans-serif；行高：1.438； }

或

身体{ 字体大小：16px/23px；字体大小：1rem；字体系列：无衬线；行高：1.438； }

您不能使用 FONT 和 FONT-SIZE，只能使用其中之一。否则浏览器将尝试同时使用两者。

【讨论】：

喜欢 typekit 链接，因为它把我带到了这个：meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights 这是一篇很棒的文章，很好地解释了无单位的行高。然而，这不是我要说的。在图片链接中，您会看到，chrome 正在同时加载 px 和 rem 元素：leftdeaf.com/chromefont-size.jpg 似乎都被应用在彼此之上。我知道 rem/px 是如何工作的（尽管无单位的 line-height 是新的，所以谢谢）。
把 PX 放在 REM 之前。浏览器总是使用最后一个，如果它不理解最后一个，它会忽略它，让你使用第一个。此外，它同时使用两者的原因是因为您使用 FONT 和 FONT-SIZE。你需要选择一个或另一个，而不是两个......
明白了，看起来好像除了 chrome 之外它都可以工作，即使在所有其他浏览器中字体大小/字体存在差异，它似乎也忽略了 em 中的 px，但我猜我只需要推进一个更庞大但工作正常的实施。谢谢
"您不能使用 FONT 和 FONT-SIZE，只能使用其中一个。否则浏览器会尝试同时使用这两个。"您可以同时使用它们。无论您使用简写和/或其组件属性都不应以意想不到的方式影响级联 - 无论发生什么似乎都是浏览器错误。
@BoltClock，这就是我最初的想法，但不确定它是否使用不当，第二次猜到了。因此，我来这里进行进一步审查。

【解决方案2】：

在浪费了很多时间和困惑之后......它实际上确实在 Google Chrome 中正确呈现。 现在感觉很傻...我忽略了 Chrome 工具中子属性的下拉箭头。图像显示了我忽略的内容。示例显示了多个速记属性和特定属性的示例，更重要的是它显示了font 属性的工作，它没有划掉，但它仍然被覆盖。不知道为什么它不符合 ~~strike through~~ 像其他所有内容一样，可能是由于字体粗细、变体、样式属性保持不变。但它有效。

【讨论】：