时间戳

首页 > 解决方案 > Webkit 任何覆盖用户代理样式表

html - Webkit 任何覆盖用户代理样式表

问题描述

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

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

在本地这工作得很好，但只要我将样式表传输到浏览器，开发工具就会向我显示：

:-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>

此样式表中的某些样式不会在 Web 上设置，例如 h1、正文边距等。然而，其他设置得很好：图像大小、字体（也异步加载）和间距。

如何解决这个问题？

标签： htmlcss

解决方案

推荐阅读