4

TL;博士

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

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

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

因此，从嵌入式服务器返回的所有文件都application/octet-stream在HTTP标头中声明。这会在 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 文档上声明 a DOCTYPE，我可以让链接的样式表在我的所有浏览器中工作。然而，这不是一个理想的解决方案。

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

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

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

索引.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;}

索引.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" alt="Logo #1"><img class="logo2" src="/images/logo2.png" alt="Logo #2"></div>
<div class="menu"><iframe name="menu" src="/menu.shtm"></iframe></div>
<div class="content"><iframe name="main" src="/home.htm"></iframe></div>
</body>

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

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

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

4

6 回答 6

4

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

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

于 2012-11-12T16:01:25.273 回答
3

我讨厌必须以这种方式回答我自己的问题，但问题肯定在于服务器正在返回application/octet-streamHTTP 标头内的内容类型。

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

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

于 2012-11-12T21:43:37.707 回答
3

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

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

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

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

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

于 2013-06-20T06:53:23.613 回答
2

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

壁虎和资源管理器中不存在相同的行为，但在 Safari 浏览器（webkit）中发生了相同的行为

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

于 2013-06-12T20:29:10.487 回答
0

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

于 2016-02-11T00:39:18.873 回答
0

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

你写过：

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

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

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

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

于 2016-03-03T03:30:24.103 回答