Question

我在样式表中手动指定h1字体大小：

h1 {
  font-size: 2em;
  margin: 1.5em 0;
}

在本地这很好用，但是一旦我将样式表传输到浏览器，Dev Tools就会向我显示：

:-webkit-any(article,aside,nav,section) h1 {
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
}

和

h1 {
  font-size: 2em; <--- this is crossed out
}

这仅在Chrome中是一个问题，Firefox可以在本地和服务器上正常工作。我通过以下方式推迟了样式表的加载：

<noscript id="deferred-styles">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
</noscript>

和

<script>
var loadDeferredStyles = () => {
    var addStylesNode = document.getElementById("deferred-styles");
    var replacement = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
};
  var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
  else window.addEventListener('load', loadDeferredStyles);
</script>

此样式表中的某些样式不会在网络状态下设置，例如h1，身体的边缘等。但是，其他设置都很好：图像大小，字体（也已异步加载）和间距。

如何解决此问题？

Webkit会覆盖用户代理样式表

0 个答案: