外部CSS在Safari正常生效，Firefox、Chrome、Opera中无效怎么解决？

嘿，我一眼就揪出问题的核心啦——你的CSS链接标签里的type属性值写错了！

问题根源 #

标准的CSS MIME类型应该是 text/css，但你写的是 style/css。Safari对这类非标准写法比较宽容，会尝试解析样式表；但Chrome、Firefox、Opera这些严格遵循Web标准的浏览器，会因为这个无效的MIME类型直接忽略样式表的引用，导致CSS完全不生效。

修正后的代码 #

把所有<link>标签里的type="style/css"改成type="text/css"，另外第一个标签里的charset="utf-8"其实是多余的（link标签不需要这个属性），可以一起去掉：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <title>some website</title>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="style/reset.css"/>
  <link rel="stylesheet" type="text/css" href="style/shared.css" />
  <link rel="stylesheet" type="text/css" href="style/home.css" />
  <!-- 其他头部内容 -->
</head>
<!-- 页面主体内容 -->
</html>

额外检查点 #

如果修改后还是有问题，可以再排查这几点：

• 确认CSS文件的路径是否正确：比如style/reset.css是否确实存在于HTML文件同级的style文件夹中，注意文件名大小写（如果你的网站部署在Linux服务器上，大小写是严格区分的）。
• 清除浏览器缓存：有时候浏览器会缓存旧的错误文件，按下Ctrl+F5（Windows）或Cmd+Shift+R（Mac）强制刷新页面。

内容的提问来源于stack exchange，提问作者mediter