CSS 未在 Safari 中加载

Question

我正在开发一个 Discord 教程网站 (http://elix.sap.md/elix/forgive)， 我有一个外部 CSS 文件。在 Chrome 中一切正常 现在当我在 Safari 上尝试时，CSS 设置消失了。在 Chrome 中，您可以看到彩色的列，而在 Safari 中只能看到文本。 我不知道发生了什么。

这就是它在 Chrome 中的样子：

这就是它在 Safari 上的样子：

.uber {
  text-align: center;
}

.column {
  width: calc(50% - 1px);
  text-align: left;
  float: left;
}

.colleft {
  border-right: 1px solid rgb(0, 0, 0);
  background-color: rgb(250, 250, 250)
}

<h1 class="uber">Opilite's Discord Tutorial</h1>
<h2 class="uber">Lernen, wie man mit Discord umgeht; auch in unser Klassenserver</h2>
<div class="column colleft">
  <h2 class="uber">Basiswissen</h2>
  <ul>
    <li>Wie beginnt man mit Discord?</li>
  </ul>
</div>
<div class="column">
  <h2 class="uber">Unser Server</h2>
  <ul>
    <li>Was musst du im unserem Server wissen?</li>
  </ul>
</div>

有人可以帮助我吗？
提前致谢， 奥皮利特

Answer 1

我已使用下面列出的工具为您的 CSS 添加前缀。

搜索检查元素后，我注意到您的 styles.css 链接不正确。

尝试确保标题中的

<link>

指向正确的地址。如果你已经这样做了，

编辑：我已经找到了你的CSS链接的工作路径。请参阅以下屏幕截图。

<link rel="stylesheet" href="forgive/styles.css">

如果仍然看不到样式，请将以下使用 autoprefixer 格式化的 CSS 粘贴到 styles.css 文件中以查看结果。

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 22 version
*/

.uber {
  text-align: center;
}

.column {
  width: -webkit-calc(50% - 1px);
  width: calc(50% - 1px);
  text-align: left;
  float: left;
}

.colleft {
  border-right: 1px solid rgb(0, 0, 0);
  background-color: rgb(250, 250, 250)
}

Answer 2

对我来说添加

type="text/css"

有效。因此使用：

<link rel="stylesheet" type="text/css" href="forgive/styles.css">

Answer 3

有时，某些浏览器的旧版本不支持更高级的功能，因此请更新您的浏览器或以您的浏览器支持的方式编写代码。

这样做就能解决所有问题。