Html 样式表不能在 Chrome/Safari 中工作，但可以在 Internet Explorer 中工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13345955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stylesheet not working in Chrome/Safari but can work in Internet Explorer
提问by RLH
TL;DR
TL; 博士
I've read through many questions on Stack Overflow on this issue and I've tried to follow the given advice. Still, my CSS stylesheet will not work in Chrome/Safari but it canwork in Internet Explorer.
我已经阅读了有关此问题的 Stack Overflow 上的许多问题，并尝试遵循给定的建议。尽管如此，我的 CSS 样式表在 Chrome/Safari 中无法使用，但可以在 Internet Explorer 中使用。
The only odd thing that I can see about my scenario is my server is returning all files as of type application/octet-stream. I cannot change this aspect of the server. Is there something I can do to interpret my CSS file as a stylesheet in Chrome/Safari and IE?
关于我的场景，我能看到的唯一奇怪的事情是我的服务器正在返回类型为 的所有文件application/octet-stream。我无法更改服务器的这一方面。我可以做些什么来将我的 CSS 文件解释为 Chrome/Safari 和 IE 中的样式表？
I have an embedded web server project that I am working on. I have very limited control of the server software and the ability to make page-level settings. All I can do is create static HTML, CSS, and image files that are compiled into the server application.
我有一个正在处理的嵌入式 Web 服务器项目。我对服务器软件的控制和进行页面级设置的能力非常有限。我所能做的就是创建编译到服务器应用程序中的静态 HTML、CSS 和图像文件。
As such, all files that are returned from the embedded server are declared as application/octet-streamin the HTTPheader. This produces warnings in Chrome but no errors.
因此，从嵌入式服务器返回的所有文件都application/octet-stream在HTTP标头中声明。这会在 Chrome 中产生警告但没有错误。
Initially, I had a problem loading this style sheet in Chrome/Safari but it would work in IE. After reading through a couple questions on Stack Overflow, I found that I needed to change my stylesheet declaration from:
最初，我在 Chrome/Safari 中加载此样式表时遇到问题，但它可以在 IE 中使用。在阅读了有关 Stack Overflow 的几个问题后，我发现我需要将样式表声明从以下位置更改：
<link rel="stylesheet" href="/styles/index.css">
to:
到：
<link rel="stylesheet" type="text/css" href="/styles/index.css">
When I made this change Chrome & Safari still failed to process the CSS file but IE also started to ignore the stylesheet.
当我进行此更改时，Chrome 和 Safari 仍然无法处理 CSS 文件，但 IE 也开始忽略样式表。
Oddly, if I do notdeclare a DOCTYPEon my HTML document I can get linked stylesheets to work in all of my browsers. This is, however, not a desirable solution.
奇怪的是，如果我不在DOCTYPE我的 HTML 文档中声明 a ，我可以获得链接的样式表以在我的所有浏览器中工作。然而，这不是理想的解决方案。
My guess is this issue has something to do with the HTTPheader declaration and that it doesn't match the type declared in the linkelement.
我的猜测是这个问题与HTTP标头声明有关，并且它与link元素中声明的类型不匹配。
What can I do to get this stylesheet to work in Chrome, Safari, and IE while following good web development codes-of-practice (i.e. using doctypes on my HTML files and not embedding the style code in the HTML headers?)
在遵循良好的 Web 开发实践代码（即在我的 HTML 文件中使用 doctypes 而不是将样式代码嵌入到 HTML 标头中？）
For clarity sake, the relevant CSS/HTML code is shown below.
为清楚起见，相关的 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
索引.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>
FYI, this is a new project that is being developed from an existing one. The original project did not declare a DOCTYPEon the HTML files. Therefore, all page data was loaded and executed in the browser in quirks mode. Furthermore, the index.htmoriginally consisted of multiple frameswithin a frameset.
仅供参考，这是一个从现有项目开发的新项目。原始项目没有DOCTYPE在 HTML 文件上声明 a 。因此，所有页面数据都以 quirks 模式在浏览器中加载和执行。此外，index.htm最初由frames一个frameset.
I am trying to update this application, using correct, and up to date methods for developing web pages. I can make this application work, but I feel that this would be at a sacrifice of future-browser compatibility if I have to rely on browser quirks mode and framesets.
我正在尝试使用正确且最新的网页开发方法更新此应用程序。我可以让这个应用程序工作，但我觉得如果我不得不依赖浏览器怪癖模式和框架集，这将牺牲未来浏览器的兼容性。
I have tried to close the link tag but that doesn't help. Technically, this shouldn't be an issue since this document is declared as an HTML5 document, rather than XHTML.
我试图关闭链接标签，但这没有帮助。从技术上讲，这应该不是问题，因为该文档被声明为 HTML5 文档，而不是 XHTML。
采纳答案by RLH
I hate to have to answer my own question this way but the problem was most certainly with the fact that the server was returning a content type of application/octet-streamwithin the HTTP header.
我不想以这种方式回答我自己的问题，但问题肯定在于服务器正在返回application/octet-streamHTTP 标头内的内容类型。
After discussing the issue with management we had to update the code associated with the HTTP processor. This is code that is part of a third-party RTOS and we have been extremely hesitant to making any changes to this code.
在与管理层讨论这个问题后，我们不得不更新与 HTTP 处理器相关的代码。这是属于第三方 RTOS 的代码，我们一直非常犹豫是否要对此代码进行任何更改。
However, in this case the need has out-weighed that desire. I've integrated the necessary changes to fix the HTTP header to return a content type of "text/css" for cascading style sheets. All is now right with the world.
然而，在这种情况下，需求超过了这种愿望。我已经集成了必要的更改来修复 HTTP 标头，以便为级联样式表返回“text/css”的内容类型。现在一切都很好。
回答by MikeM
It's certainly due to the application/octet-streamcontent type. I can re-create the issue on my end. Soon as the content type is set to text/cssyour HTML/CSS load fine.
这当然是由于application/octet-stream内容类型。我可以在我的最后重新创建这个问题。只要内容类型设置为text/css您的 HTML/CSS 加载就可以了。
As a workaround you can use <style>tags for you CSS if you can't get the server to send the correct content type.
作为一种解决方法，<style>如果您无法让服务器发送正确的内容类型，您可以为 CSS使用标签。
回答by devboell
I think I'll just chime in here. Not to answer the question, but to confirm the issue and perhaps help people with similar problems.
我想我会在这里插话。不是回答问题，而是确认问题，也许可以帮助有类似问题的人。
I had the same problem: an external css file was loaded alright, but it was not applied in Chrome. (Safari and FF were ok about it). So, same problem, slightly different cause.
我有同样的问题：一个外部 css 文件加载正常，但它没有在 Chrome 中应用。（Safari 和 FF 对此没有意见）。所以，同样的问题，原因略有不同。
It turned out that because of a bug in the webserver code the HTTP response contained two Content Types, 'text/html' and'text/css'.
事实证明，由于网络服务器代码中的错误，HTTP 响应包含两个内容类型，“text/html”和“text/css”。
The solution was to remove the faulty 'text/html' line. It seems Chrome is pickier than other browsers about response headers. Which I suppose is legitimate, but a warning would have been nice.
解决方案是删除错误的“text/html”行。在响应标头方面，Chrome 似乎比其他浏览器更挑剔。我认为这是合法的，但警告会很好。
btw, you can see all the http information for a loaded resource in Chrome, when you open Developer Tools, and select Network. Then click on the file that you want to investigate. (it took me a while to find that)
顺便说一句，当您打开开发人员工具并选择网络时，您可以在 Chrome 中看到已加载资源的所有 http 信息。然后单击要调查的文件。（我花了一段时间才找到）
回答by Edorka
We had a problems with an iframe wich it's contents was updated by an external javascript routine, the CSS were loaded but were not applied. But updating the body HTML from a routine present in the iframe head worked as suposed to.
我们有一个 iframe 的问题，它的内容由外部 javascript 例程更新，CSS 已加载但未应用。但是从 iframe 头中存在的例程更新正文 HTML 可以正常工作。
This same behaviour was not present in gecko and explorer, but happened the same at Safari browser (webkit)
壁虎和资源管理器中不存在相同的行为，但在 Safari 浏览器 (webkit) 中发生了相同的行为
Hope this could give some light in this curious case.
希望这可以在这个奇怪的案例中提供一些启发。
回答by John
I would like to add one bit of information that may save some of you some time. It appeared that chrome was not recognizing my CSS either. After reading the above post I reviewed the files in the Developer Tools->Network. Turns out that Chrome was using a locally cached version of my CSS. As soon as I refreshed as opposed to accessing the URL again, it worked!
我想添加一点信息，可能会为你们节省一些时间。看来 chrome 也无法识别我的 CSS。阅读完上面的帖子后，我查看了 Developer Tools->Network 中的文件。原来 Chrome 使用的是我的 CSS 的本地缓存版本。一旦我刷新而不是再次访问 URL，它就起作用了！
回答by Stephen
I'm no expert, but i've made this mistake before, it's rather simple.
我不是专家，但我以前犯过这个错误，这很简单。
You've written:
你写过：
<link rel="stylesheet" href="/styles/index.css">
If this is a folder in the same directory as your index.html file, then you need to remove the first /. like so:
如果这是与 index.html 文件位于同一目录中的文件夹，则需要删除第一个/. 像这样：
<link rel="stylesheet" href="styles/index.css">
EDIT: I think someone else mentioned this already, but it may have been overlooked.
编辑：我认为其他人已经提到了这一点，但它可能被忽略了。
