2012-06-01 11 views
6

In meiner Entwicklung environemnt alles scheint völlig in Ordnung, ich habe ein Tortendiagramm, das eine Leinwand und Animation das scheint gut, wenn durch den Browser hosting.Hosting ASP.Net mit HTML5 JS und Twitter Bootstrap-Formate unterschiedlich

Ich benutze auch Twitter Bootstrap und haben eine Navigationsleiste am oberen Rand der Seite, die zwei Elemente hat.

Hier sind einige Beispiele:

In der Entwicklungsumgebung

http://i.stack.imgur.com/TtC5J.png

in IIS-Hosting

http://i.stack.imgur.com/DNLkg.png

Nach der Ablehnung des IIS-Version bleibt der Fehler konstant, können Sie auch kann feststellen, dass die Rundung des Knopfes nicht ganz gleich ist.

Wir hosten auf IIS6 mit Standardeinstellungen und fragen uns, ob etwas auf der Website getan werden muss, um dies richtig einzubinden? Ich registriere die .LESS nirgends, ich glaube nicht, also nicht sicher, ob das der Grund dafür sein könnte.

Vielen Dank im Voraus.

+0

Sie sie im gleichen Browser sehen? Einer sieht aus wie IE9 + (mit abgerundeten Ecken) und der andere sieht wie eine ältere Version aus. – Terry

+0

Genau der gleiche Browser. – LukeHennerley

+0

Erhalten Sie Client-Skript oder Renderfehler? – Terry

Antwort

5

Sie müssen das X-UA-kompatible Meta-Tag festlegen, um dies zu beheben. Fügen Sie der Kopfzeile Ihrer Webseite das folgende Meta-Tag hinzu, und das Problem sollte gelöst werden

Dadurch wird sichergestellt, dass es in der Entwicklung und in IIS gleich aussehen wird. (Mit dem gleichen Browser)

<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 

Sie können auch folgende Direktive in Ihrer web.config hinzufügen, einen benutzerdefinierten Header Anwendung breit hinzuzufügen, anstatt die pro Seite Meta-Tag.

<?xml version="1.0" encoding="utf-8"?> 
<configuration> 
    <system.webServer> 
     <httpProtocol> 
     <customHeaders> 
      <clear /> 
      <add name="X-UA-Compatible" value="IE=Edge" /> 
     </customHeaders> 
     </httpProtocol> 
    </system.webServer> 
</configuration> 

Dieses Verhalten wird verursacht, weil IE Intranet-Sites im Kompatibilitätsmodus standardmäßig macht. (Da Microsoft denkt, dass viele Intranet-Sites veraltet sind, denke ich) Sie können dies ändern, indem Sie zu Tools -> Compatibility ViewSettings gehen.

Referenzen:

+0

Man könnte sogar 'chrome = 1' verwenden, wie hier [http://www.chromium.org/developers/how-tos/chrome-frame-getting-started/#TOC-Making-Your-Pages-Work -With-Google-Chrome-Frame) oder überprüfen Sie die [msdn doc] (http://msdn.microsoft.com/library/cc288325.aspx). – Sherbrow

+0

Perfekt! Das hat für mich funktioniert. Für andere Referenz, hier ist die [Dokumentation auf X-UA-kompatiblen] (http://msdn.microsoft.com/en-us/library/cc288325 (v = vs.85) .aspx). –

+0

Erstaunlich! es woks jetzt einfach Danke dir +1 gegeben ist – Nayef

1

Klingt wie Sie weniger verwenden, ist das korrekt? Wenn ja, wie Sie bereits erwähnt haben, müssen Sie es in IIS einrichten, um die twitter boostrap zu verwenden, wenn Sie die Funktionen verwenden, die LESS erfordern.

Ich hatte ähnliche Probleme mit IIS und habe es richtig erkennen Dateierweiterungen, wenn sie nicht standardmäßig in IIS sind.

Die Chancen stehen gut, dass Ihr localhost über Dateizuordnungen nicht als Schutz ist oder Sie eine andere Version von IIS lokal als IIS6 werden und ermöglicht bereits die .Weniger Erweiterung.

Um dies zu beheben, müssen Sie die Erweiterung/Zuordnung zu IIS6 hinzufügen.

Kurzversion

  • öffnen Webapplikation Eigenschaften
  • Klicken Sie Konfiguration ...
  • Unter den Mappings Registerkarte
  • Executable hinzufügen klicken: Geben Sie der gleiche Wert th at ist Setup für die ASPX-Erweiterung unter der Registerkarte Mappings
  • Erweiterung:.weniger
  • Verbs: Überprüfen Sie: Limit To Enter: GET, HEAD
  • Script Engine:
  • dieser Datei überprüfen existiert Suche: Un-geprüft

Graphische Version, wenn es hilft jedem: Hier ist ein Link mit Details, die ich unten reproduziert habe, falls er verschwindet.

http://wiki.uiowa.edu/display/~mbergal/2012/06/08/Configuring+IIS+6+to+support+dotlesscss+(LESS+CSS)

Gehen Sie auf die Eigenschaften der Website.

enter image description here

Öffnen Sie die Konfiguration

enter image description here

Fügen Sie die Erweiterung

enter image description here

enter image description here