Css3pie funktioniert komplett auf localhost aber nur teilweise auf remote server

Question

Ich habe eine Website online, es ist eine Web-App in ASP.NET geschrieben. Wenn ich den HTML-Code der Website kopiere, kopiere ihn in eine HTML-Datei und laufe auf localhost (Apache-Server), alles ist in Ordnung und CSS3PIE funktioniert einwandfrei.

Das Problem ist, dass auf dem Server es anders funktioniert. Erstens hat es überhaupt nicht funktioniert und die Elemente, die das Verhalten von pie.htc in css angehängt hatten, verschwanden vollständig oder wir sagten eher, dass es transparent wurde.

Ich stolperte über einen Hinweis sagen, dass position: relative; auf dem gegebenen Element das Problem lösen wird. Es war so, aber es war überhaupt nicht befriedigend. Der Hintergrund war immer noch transparent, Teile der Elemente verschwanden und beim Schweben ließen sich andere Elemente um ein paar Pixel zur Seite springen. Schatten arbeiteten, abgerundete Ecken arbeiteten auch, aber keine Steigungen.

Answer 1

Ein paar Möglichkeiten:

1) Die .htc Datei mit dem korrekten MIME-Typ nicht bedient wird. Vom CSS3 PIE Known Issues

IE erfordert, dass HTC Verhalten mit einem Content-Type-Header von "text/x-Komponente" serviert, sonst wird es einfach das Verhalten ignorieren. Viele Webserver sind so vorkonfiguriert, dass sie den richtigen Inhaltstyp liefern, andere jedoch nicht.

Wenn Sie Probleme mit dem PIE-Verhalten haben, das nicht angewendet wird, überprüfen Sie Ihre Serverkonfiguration und wenn möglich, aktualisieren Sie es, um den richtigen Inhaltstyp zu verwenden. Für Apache, können Sie dies in einer .htaccess-Datei tun:

AddType text/x-component .htc 

Ist das problematische Verhalten auf einem Server mit IIS? Wenn ja, welche Version von IIS? IIS 5 or higher should have the mime-type for .htc configured correctly

2) Vielleicht ist es ein Weg Problem, wieder von den CSS3 PIE known issues

Relative Pfade

Es gibt zwei Hauptprobleme in relative Pfade in CSS bezogen werden: Das Verhalten URL

IE interpretiert die URL für die Verhaltenseigenschaft relativ zum Quelldokument und nicht relativ zur CSS-Datei wie alle anderen er CSS-Eigenschaft. Dies macht die PIE Verhalten unbequem Aufruf , weil die URL muss entweder sein:

Absolute aus der Domain-Root - das macht die CSS nicht leicht transportierbar zwischen Verzeichnissen - oder, Bezogen auf das HTML-Dokument - das macht Das CSS kann nicht einfach zwischen verschiedenen HTML-Dateien wiederverwendet werden.

URLs in PIE-interpretiert CSS-Eigenschaften

PIE analysiert nicht die CSS-Stylesheets (dies zu tun, wäre inakzeptabel langsam sein); Es lässt IE das Parsen, Selektorabfragen, Kaskadieren, usw. behandeln und fragt es dann einfach nach den resultierenden Eigenschaftswerten. Diese bedeutet, dass, wenn PIE einen Eigenschaftswert erhält, es keine Kenntnis des Kontexts hat, von dem dieser Wert stammt.

Als Ergebnis für Eigenschaften, die URL-Werte (wie border-Bild oder -gehen-Hintergrund) enthalten, PIE kann diese URLs in Bezug auf die CSS-Datei, in der sie erscheinen nicht lösen. Es löst sie stattdessen relativ zu dem JavaScript-Ausführungskontext auf, der der Speicherort des Quell-HTML-Dokuments ist.