2011-10-03 29 views
9

To jest dziwny problem, ale zakładam, że zrobiłem coś zepsuty gdzieś po linii, aby skończyć z tą obecną sytuacją.Pliki CSS obsługiwane przez chmurę CloudFront nie są renderowane

Podczas próby serwowania plików statycznych (obrazy, css & js) z CloudFront, wydaje się, że nie renderują się prawidłowo. Na przykład jeden z moich arkuszy stylów jest dostępny tutaj: http://d21uvxjmc903qz.cloudfront.net/stylesheets/hf.4fabc9c719f8.css, ale nie wydaje się być "zastosowany" do DOM, jak można się spodziewać. (Na przykład, patrząc na narzędzia programistów w przeglądarce Chrome lub Firefox w Firebug, odpowiednie style nie są stosowane do elementu <header>.

Patrząc na nagłówki odpowiedzi, wygląda na to, że Content-Type jest ustawiony prawidłowo, więc jestem ładna wiele pomysłów.

Wszelkie sugestie, gdzie szukać dalej?

+0

Czy masz link do strony, która go używa? –

+0

Zakładam, że włączysz to w HTML w [właściwy sposób] (http://www.htmldog.com/guides/cssbeginner/applyingcss/). – Alex

+0

Jestem pewien, że uwzględniam to we właściwy sposób, używam Django i jedyną zmianą jest adres URL, do którego się odwołuję. (np. serwowany poza moją maszyną lokalną nie ma żadnych problemów, serwowany jest w chmurze działa dziwnie.) – philipk

Odpowiedz

9

problemem jest prawdopodobnie niewłaściwy typ zawartości w wiadrze S3. miałem ten sam problem i zmiana typu zawartości stałej problem Zmieniłem poniższe z text/plain na text/css, a następnie style renderowane poprawnie.

enter image description here

+0

Wystąpił ten sam problem i to naprawiło to dla mnie. –

+0

Dziękuję TimDog! Rozwiązałem dla mnie kwestię 2 godzin +. Jesteś meżczyzną! – ac360

0

Wystąpił problem z plikiem CSS serwowanym z chmury, która według nas nie była poprawnie wyświetlana. Problem ten zakończył się niepowołanym pojedynczym cytatem w wartości adresu URL strony.

background: url(//xxxxx.cloudfront.net/img/flags48/Cote%20d'Ivoire.png) no-repeat} 

Kiedy otrzymuje ' z %27 kwestie CSS zostały ustalone.

background: url(//xxxxx.cloudfront.net/img/flags48/Cote%20d%27Ivoire.png) no-repeat} 
1

Dla mnie link nie może być http ale musiał być https: // .. on pracował dla mnie, kiedy zmodyfikował tę

<link rel="stylesheet" href="w3.css"> 

w pliku html do tego:

<link rel="stylesheet" href="https://s3.amazonaws.com/yourFolder/w3.css">

nadzieję, że pomoże.

Powiązane problemy