Stylesheet funktioniert nicht in Chrome/Safari funktioniert aber im Internet Explorer

TL;DR

Ich habe gelesen durch viele Fragen auf Stack Overflow über dieses Thema und ich habe versucht, befolgen Sie die Ratschläge. Immer noch, mein CSS-stylesheet funktioniert nicht in Chrome/Safari, aber es kann in Internet Explorer arbeiten.

Die einzige seltsame Sache, die ich sehen kann, über meinem Szenario ist mein server wieder alle Dateien als vom Typ application/octet-stream. Ich kann nicht ändern, dieser Aspekt des Servers. Gibt es etwas, was ich tun kann, zu interpretieren, meine CSS-Datei als stylesheet, in Chrome/Safari und IE?

Ich habe ein embedded web-server-Projekt, an dem ich arbeite. Ich habe sehr begrenzte Kontrolle über die server-software und die Fähigkeit, die Seite-level-Einstellungen. Alles was ich tun kann, ist das erstellen von statischen HTML -, CSS-und Bild-Dateien, die kompiliert werden, die in der server-Anwendung.

Als solche werden alle Dateien, die zurückgegeben werden aus der embedded-server deklariert application/octet-stream im HTTP header. Dies erzeugt Warnungen in Chrome aber keine Fehler.

Anfangs hatte ich ein problem beim laden dieser Stylesheets in Chrome/Safari, aber es würde funktionieren im IE. Nach dem durchlesen ein paar Fragen auf Stack Overflow, ich fand, dass ich brauchte, um meine stylesheet-Deklaration von:

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

:

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

Wenn ich diese änderung vorgenommen Chrome & Safari immer noch Fehler beim verarbeiten der CSS-Datei, aber der IE auch angefangen zu ignorieren das stylesheet.

Seltsam, wenn ich nicht erklären DOCTYPE auf meine HTML-Dokument, das ich kann sich mit stylesheets zu arbeiten, in allen meinen Browsern. Dies ist jedoch keine wünschenswerte Lösung.

Meine Vermutung ist, diese Frage hat etwas zu tun mit der HTTP header-Erklärung und, dass es nicht mit Typ deklariert link element.

Was kann ich tun, um diese stylesheet-arbeiten in Chrome, Safari und IE während der folgenden guten web-Entwicklung-codes-der-Praxis (d.h. mit doctypes auf meine HTML-Dateien und nicht die Einbettung der Stil-code in den HTML-Header?)

Um der Klarheit Willen, die entsprechenden CSS - /HTML-code ist unten dargestellt.

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" 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, dies ist ein neues Projekt, das entwickelt wird aus einer bestehenden. Das ursprüngliche Projekt nicht erklären, ein DOCTYPE auf der HTML-Dateien. Deshalb, Seite alle Daten geladen und im browser ausgeführt, im quirks-Modus. Außerdem index.htm Bestand ursprünglich aus mehreren frames innerhalb einer frameset.

Ich bin versucht, zu aktualisieren diese Anwendung korrekt und up-to-date Methoden für die Entwicklung von web-Seiten. Ich kann diese Anwendung zu arbeiten, aber ich habe das Gefühl, dass dies bei einem Opfer der Zukunft-browser-Kompatibilität, wenn ich darauf angewiesen, dass der browser im quirks-Modus und framesets.

Habe ich versucht, schließen Sie das link-tag, aber das hilft nicht. Technisch gesehen, dies sollte kein Problem sein da dieses Dokument erklärt, wie ein HTML5-Dokument, anstatt XHTML.

Seltsam, 1. mal, dass der IE etwas gutes zu tun und mit anderen Browsern nicht
Schließen Sie Ihre meta-und link-tags mit /> Sie die derzeit geöffnet sind. (Kann auch das gleiche tun mit <img>, obwohl, die keinen Einfluss auf die Frage
Ja, ich bin nicht ohne Probleme mit meinen Bildern, aber ich werde versuchen Ihren Vorschlag.
Nein, es hat nicht geholfen. @insertusernamehere, ich wollte es versuchen, nur um sicher zu sein, aber deshalb habe ich es weggelassen.
Wo ist deine CSS-Datei liegt? Ist es im root? Da /styles/index.css Aussehen wird, in das root-Verzeichnis, in Chrom, basierend auf meine Experimente. (ZB. auf meinem Windows-Rechner, es war auf der Suche nach C:\styles\index.css.) Einmal steckte ich die CSS-Datei da, es funktionierte.

InformationsquelleAutor RLH | 2012-11-12

  1. 4

    Es ist sicherlich aufgrund der application/octet-stream Inhalte geben. Ich kann neu erstellen Sie, das Problem auf meinem Ende. Sobald der content-Typ ist text/css Ihre HTML - /CSS-Last in Ordnung.

    Als eine Problemumgehung, die Sie verwenden können, <style> tags für Sie CSS, wenn Sie nicht bekommen kann den server zu senden, der richtige content-type.

    InformationsquelleAutor MikeM

  2. 3

    Ich hasse zu haben, um Antwort auf meine eigene Frage, aber das problem war, dass die meisten sicherlich mit der Tatsache, dass der server wurde wieder ein Inhaltstyp application/octet-stream die im HTTP-header.

    Nach Erörterung der Angelegenheit mit dem management hatten wir aktualisieren den code im Zusammenhang mit der HTTP-Prozessor. Dies ist der code, der Teil einer Drittanbieter-RTOS und wir wurden äußerst zögerlich, um änderungen an diesem code.

    In diesem Fall ist aber die Notwendigkeit ist aus-gewogen, die Lust. Ich habe integriert die erforderlichen änderungen zur Korrektur der HTTP-header zurückgeben einem content-Typ "text/css" cascading style sheets. Alles ist jetzt in Ordnung mit der Welt.

    Ich bin vor dem gleichen Problem. Können Sie bitte erläutern Sie Ihre Antwort. Ich muss genau wissen, was getan werden muss, um dieses Problem zu beheben.
    Wenn eine Datei gesendet wird, wird HTTP (in der Regel von einigen server-Anwendung wie ASP.net, MVC, PHP, oder in meinem Fall, einen web-server, geschrieben für eine kleine embedded-computer) das HTTP-Protokoll schreibt vor, dass jede Datei muss einen CONTENT-TYPE definiert. Content-Arten sind leicht zu setzen in den meisten frameworks. Trotzdem, chrome ist, dass alle CSS-Dateien zu stoßen, gekennzeichnet als "text/css". Alle anderen Browser können das akzeptieren praktisch alle Inhalte geben, technisch gesehen, weil es nicht darauf ankommt. Die bottom line ist Verchromt, sich mehr streng bzgl. der Inhalte geben, als andere Browser.
    Ich habe meine server-Konfigurationen für den MIME-Typ und hatte es einen Eintrag für " text/CSS. So, mein server sollte die zurückgegebene Content-type-header text/CSS, aber es zurückgegeben application/octet-stream. Ich entschloss mich, dieses Problem, indem Sie die DOCTYPE-Tags in meine Dateien. Ich weiß, das ist nicht ein standard-Lösung, aber ich hatte keine andere Wahl.
    Dies kann tatsächlich sein, den "richtigen" Ansatz, mit der Einführung von HTML5. Ich habe nicht arbeitete, diesem oder einem damit im Zusammenhang stehendes Projekt in den Jahren also kann ich mich nicht ganz daran erinnern. Wieder, mein server war eine eingebettete Anwendung, die gemeint ist, um zu arbeiten auf sehr wenig hardware. Jedes Stück software ist anders, so ich habe keine Ahnung, warum dein server nicht richtig funktioniert. Wenn Sie jemals daran interessiert, es zu beheben, fühlen Sie sich frei zu posten eine andere Frage, und ich bin sicher, jemand kann dir helfen, es zu lösen.

    InformationsquelleAutor RLH

  3. 3

    Ich denke, ich werde einfach hier in Glockenspiel. Nicht die Frage zu beantworten, sondern um zu bestätigen das Problem und vielleicht helfen, Menschen mit ähnlichen Problemen.

    Ich hatte das gleiche problem: eine externe css-Datei geladen wurde und in Ordnung, aber es wurde nicht angewandt, in Chrom. (Safari und FF waren ok). So, gleiche problem, etwas andere Ursache.

    Es stellte sich heraus, dass da ein Fehler in der webserver-code, der HTTP-Antwort enthalten sind zwei Content-Typen, 'text/html' und 'text/css'.

    Die Lösung war, entfernen die fehlerhafte 'text/html' - Linie. Es scheint Chrome ist wählerischer als andere Browser über response-Header. Was ich vermute, ist legitim, aber eine Warnung wäre schön gewesen.

    btw, können Sie sehen, alle http-Angaben, die für eine geladene Ressource in Chrome beim öffnen der Entwickler-Tools, und wählen Sie Netzwerk. Dann klicken Sie auf die Datei, die Sie untersuchen möchten. (es hat mich eine Weile zu finden, dass)

    Vielen Dank für das Letzte bisschen, ich war in der Lage, um zu sehen, dass Chrome war das rendering der css in der doppelten Sprache, ging ich zu meiner htmls-Dateien von einem script generiert werden und konnte sehen, Sie hatten den falschen text-Codierung, verändert Sie in Notepad++ in Ansi und dann Chrome gestartet mit dem css. Müssen nur herausfinden, wie man richtig das Skript jetzt.

    InformationsquelleAutor devboell

  4. 2

    Hatten wir ein Probleme mit einem iframe, welches seinen Inhalt aktualisiert wurde, indem Sie eine externe javascript-routine, die CSS geladen wurden aber nicht angewandt wurden. Aber die Aktualisierung der HTML-Körper aus einer routine vorhanden, die in den iframe Kopf arbeitete als suposed.

    Das gleiche Verhalten war nicht in gecko und Entdecker, aber so ist es passiert das gleiche im Safari-browser (webkit)

    Hoffen, diese könnte etwas Licht in diesen seltsamen Fall.

    InformationsquelleAutor Edorka

  5. 0

    Ich möchte hinzufügen, ein bisschen von Informationen, die möglicherweise sparen Sie einige Zeit. Es zeigte sich, dass Chrom war nicht zu erkennen, mein CSS. Nach dem Lesen des oben genannten Beitrag habe ich die Dateien überprüft, die in den Developer Tools->Netzwerk. Stellt sich heraus, dass Chrome eine lokal zwischengespeicherte version meiner CSS. Sobald ich aktualisiert, im Gegensatz zum Zugriff auf die URL wieder, es funktionierte!

    InformationsquelleAutor John

  6. 0

    Ich bin kein Experte, aber ich habe diesen Fehler gemacht, bevor, ist es ziemlich einfach.

    Du geschrieben hast:

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

    Wenn dies ein Ordner im gleichen Verzeichnis wie Ihre index.html Datei, dann müssen Sie entfernen die erste /. etwa so:

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

    EDIT: ich denke, jemand anderes erwähnte dies bereits, aber es kann übersehen wurden.

    InformationsquelleAutor Stephen

Schreibe einen Kommentar