样式表不能在 Chrome/Safari 中工作，但可以在 Internet Explorer 中工作

Posted

技术标签:

【中文标题】样式表不能在 Chrome/Safari 中工作，但可以在 Internet Explorer 中工作【英文标题】：Stylesheet not working in Chrome/Safari but can work in Internet Explorer 【发布时间】：2012-11-01 00:12:58 【问题描述】：

TL;DR

我已经阅读了有关 Stack Overflow 上有关此问题的许多问题，并尝试遵循给定的建议。不过，我的 CSS 样式表在 Chrome/Safari 中无法使用，但它可以在 Internet Explorer 中使用。

我能看到的关于我的场景的唯一奇怪的事情是我的服务器正在返回类型为application/octet-stream 的所有文件。我无法更改服务器的这一方面。有什么办法可以将我的 CSS 文件解释为 Chrome/Safari 和 IE 中的样式表吗？

我正在开发一个嵌入式 Web 服务器项目。我对服务器软件的控制和进行页面级设置的能力非常有限。我所能做的就是创建编译到服务器应用程序中的静态 html、CSS 和图像文件。

因此，从嵌入式服务器返回的所有文件都在 HTTP 标头中声明为 application/octet-stream。这会在 Chrome 中产生警告，但不会出现错误。

最初，我在 Chrome/Safari 中加载此样式表时遇到问题，但它可以在 IE 中使用。在阅读了关于 Stack Overflow 的几个问题后，我发现我需要更改样式表声明：

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

到：

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

当我进行此更改时，Chrome 和 Safari 仍然无法处理 CSS 文件，但 IE 也开始忽略样式表。

奇怪的是，如果我不在我的 HTML 文档上声明 DOCTYPE，我可以让链接的样式表在我的所有浏览器中工作。然而，这不是一个理想的解决方案。

我的猜测是这个问题与 HTTP 标头声明有关，它与 link 元素中声明的类型不匹配。

如何让这个样式表在 Chrome、Safari 和 IE 中工作，同时遵循良好的 Web 开发实践代码（即在我的 HTML 文件上使用 doctypes 并且不在 HTML 标头中嵌入样式代码？）

为清楚起见，相关的 CSS/HTML 代码如下所示。

index.css

html height:100%
body margin:0;min-height:100%;position:relative
iframe width:100%;height:100%;border:none

.hdr min-width:765px;overflow:auto
.logo1 float:left;margin:4px
.logo2 float:right;margin:4px
.menu position:absolute;top:70px;left:0px;bottom:0px;width:175px
.content position:absolute;top:70px;left:175px;bottom:0px;right:0px;

index.htm

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" href="/styles/index.css"> <!-- Removed the type declaration so that  this would at least work in IE9 //-->
</head>
<body lang="en-us">
<div class="hdr"><img class="logo1" src="/images/logo1.png" ><img class="logo2" src="/images/logo2.png" ></div>
<div class="menu"><iframe name="menu" src="/menu.shtm"></iframe></div>
<div class="content"><iframe name="main" src="/home.htm"></iframe></div>
</body>

仅供参考，这是一个从现有项目开发的新项目。原始项目没有在 HTML 文件上声明 DOCTYPE。因此，所有页面数据都以怪异模式在浏览器中加载和执行。此外，index.htm 最初由多个frames 组成frameset。

我正在尝试更新此应用程序，使用正确且最新的方法来开发网页。我可以让这个应用程序工作，但我觉得如果我不得不依赖浏览器怪癖模式和框架集，这将牺牲未来浏览器的兼容性。

我试图关闭链接标签，但没有帮助。从技术上讲，这应该不是问题，因为该文档被声明为 HTML5 文档，而不是 XHTML。

【问题讨论】：

奇怪，第一次 IE 做得很好，而其他浏览器却没有 尝试使用/&gt; 关闭您的元和链接标签，它们目前处于打开状态。 （也可以对&lt;img&gt; 做同样的事情，尽管这不会影响问题 @Andy 是的，我的图片没有任何问题，但我会尝试你的建议。 不，它没有帮助。 @insertusernamehere，我想试一试只是为了确定，但这就是我忽略它的原因。 您的 CSS 文件位于何处？是在根吗？因为根据我的实验，/styles/index.css 将在 Chrome 的根目录中查找。 （例如，在我的 Windows 机器上，它正在寻找 C:\styles\index.css。）一旦我将 CSS 文件放在那里，它就可以正常工作了。 【参考方案1】：

这当然是由于 application/octet-stream 内容类型。我可以重新创建我的问题。只要内容类型设置为text/css，您的 HTML/CSS 就会正常加载。

作为一种解决方法，如果您无法让服务器发送正确的内容类型，您可以为 CSS 使用 &lt;style&gt; 标签。

【讨论】：

【参考方案2】：

我不想用这种方式回答我自己的问题，但问题肯定在于服务器在 HTTP 标头中返回的内容类型为 application/octet-stream。

在与管理层讨论该问题后，我们不得不更新与 HTTP 处理器相关的代码。这是第三方 RTOS 的一部分代码，我们一直非常犹豫是否要对此代码进行任何更改。

但是，在这种情况下，需求超过了愿望。我已经集成了必要的更改来修复 HTTP 标头以返回“text/css”的内容类型以用于级联样式表。现在世界一切正常。

【讨论】：

我也面临同样的问题。您能否详细说明您的答案。我需要确切地知道需要做什么来解决这个问题。 当一个文件以 HTTP 发送时（通常来自一些服务器应用程序，例如 ASP.net、MVC、php，或者在我的例子中，是为小型嵌入式计算机编写的 Web 服务器），HTTP 协议规定每个文件都需要定义一个CONTENT-TYPE。在大多数框架中，内容类型很容易设置。无论如何，chrome 期望所有的 CSS 文件都被标记为“text/css”。所有其他浏览器几乎可以接受任何内容类型，因为从技术上讲，这无关紧要。底线是 Chrome 在内容类型方面的行为比其他浏览器更严格。 我检查了我的服务器配置的 MIME 类型，它有一个文本/CSS 条目。所以，我的服务器应该以 text/CSS 的形式返回 Content-type 标头，但它返回了 application/octet-stream。我通过删除文件中的 DOCTYPE 标签解决了这个问题。我知道这不是标准解决方案，但我别无选择。 @mav3n 这实际上可能是 HTML5 出现时的“正确”方法。多年来我没有从事过这个或任何相关的项目，所以我不太记得了。同样，我的服务器是一个嵌入式应用程序，旨在在非常有限的硬件上工作。每个软件都不同，所以我不知道为什么您的服务器运行不正常。如果您有兴趣修复它，请随时发布另一个问题，我相信有人可以帮助您解决它。【参考方案3】：

我想我会在这里插话。不是为了回答问题，而是为了确认问题，或许可以帮助有类似问题的人。

我遇到了同样的问题：外部 css 文件加载正常，但未在 Chrome 中应用。 （Safari 和 FF 对此表示满意）。所以，同样的问题，略有不同的原因。

事实证明，由于网络服务器代码中的错误，HTTP 响应包含两种内容类型，“text/html”和“text/css”。

解决方案是删除错误的“text/html”行。似乎 Chrome 在响应标头方面比其他浏览器更挑剔。我认为这是合法的，但警告会很好。

顺便说一句，当您打开开发者工具并选择网络时，您可以在 Chrome 中看到已加载资源的所有 http 信息。然后单击要调查的文件。 （我花了一段时间才找到）

【讨论】：

感谢最后一点，我可以看到 Chrome 正在以双语言渲染 css，我查看了由脚本生成的 htmls 文件，可以看到它们的文本编码错误，在 Notepad++ 中将它们更改为 Ansi，然后 Chrome 开始使用 css。现在只需要弄清楚如何更正脚本。【参考方案4】：

我们遇到了一个 iframe 的问题，它的内容由外部 javascript 例程更新，CSS 已加载但未应用。但是从 iframe 头部中的例程更新正文 HTML 的工作方式与预期相同。

gecko 和 explorer 中不存在相同的行为，但在 Safari 浏览器（webkit）中发生了相同的行为

希望这可以为这个奇怪的案例提供一些启示。

【讨论】：

【参考方案5】：

我想补充一点信息，可能会为你们中的一些人节省一些时间。看来 chrome 也无法识别我的 CSS。阅读完上述帖子后，我查看了开发人员工具->网络中的文件。原来 Chrome 使用的是我的 CSS 的本地缓存版本。只要我刷新而不是再次访问 URL，它就起作用了！

【讨论】：

【参考方案6】：

我不是专家，但我以前犯过这个错误，很简单。

你写过：

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

如果这是与您的 index.html 文件位于同一目录中的文件夹，则您需要删除第一个 /。像这样：

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

编辑：我认为其他人已经提到了这一点，但它可能被忽略了。

【讨论】：

以上是关于样式表不能在 Chrome/Safari 中工作，但可以在 Internet Explorer 中工作的主要内容，如果未能解决你的问题，请参考以下文章

为啥我的 XPath 查询（抓取 HTML 表）只能在 Firebug 中工作，而不能在我正在开发的应用程序中工作？

函数在代码中工作，但不能作为工作表中的 UDF

为什么FetchKind不能使用Mapping.ByCode在NHibernate中工作

选项卡控件中的嵌入式对话框不能在第二个对话框中工作，MFC

如何使样式中的 Layout_margin 在 Java 中工作

属性选择器如何在JavaFX中工作？