javascript - Găzduirea ASP.Net cu HTML5 JS și Twitter Bootstrap formatează diferit

În mediul meu de dezvoltare, totul apare perfect, am un grafic circular care folosește un canvas și animație, acestea apar bine atunci când sunt găzduite prin browser.

De asemenea, folosesc Twitter Bootstrap și am o bară de navigare în partea de sus a paginii, care are două item-uri.

Iată câteva exemple:

În mediul de dezvoltare

https://i.sstatic.net/TtC5J.png

Găzduire în IIS

https://i.sstatic.net/DNLkg.png

După ce ați ignorat versiunea IIS, eroarea rămâne constantă, de asemenea, puteți observa că rotunjirea butonului nu este chiar aceeași.

Găzduim pe IIS6 cu setările implicite, așa că mă întreb dacă trebuie făcut ceva pe site pentru a încorpora corect acest lucru? Nu înregistrez nicăieri fișierele .LESS, nu cred, așa că nu sunt sigur dacă acesta ar putea fi cauza.

Mulțumesc anticipat.

Răspuns #1

Trebuie să setați meta tag-ul X-UA-Compatible pentru a rezolva acest lucru. Adăugați următorul meta tag în antetul paginii dvs. web și problema ar trebui să fie rezolvată

Acest lucru va asigura că va arăta la fel în dezvoltare și în IIS. (folosind același browser)

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

De asemenea, poți adăuga următoarea directivă în fișierul tău web.config pentru a adăuga un antet personalizat la nivelul întregii aplicații în loc de meta tag-ul pe fiecare pagină.

<?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>

Acest comportament este cauzat deoarece IE afișează site-urile intranet în modul de compatibilitate în mod implicit. (pentru că Microsoft crede că multe site-uri intranet sunt învechite, bănuiesc) Poți modifica acest lucru accesând Instrumente -> Setări Vizualizare Compatibilitate.

Referințe :

• http://weblogs.asp.net/rajbk/archive/2010/05/12/pages-in-ie-render-differently-when-served-through-the-asp-net-development-server-and-production-server.aspx
• http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx

Răspunsul #2

Se pare că folosești LESS, este corect? Dacă da, așa cum ai menționat, trebuie să îl configurezi în IIS pentru a folosi Twitter Bootstrap dacă folosești acele funcții care necesită LESS.

Am avut probleme similare cu IIS și am reușit să recunosc corect extensiile de fișiere atunci când acestea nu sunt implicite în IIS.

Există șanse ca localhost să nu fie la fel de protector în privința mapărilor de fișiere sau că folosești o versiune diferită de IIS local decât IIS6 și aceasta deja permite extensia .less.

Pentru a remedia acest lucru, trebuie să adăugați în extensia/maparea la IIS6.

Versiune scurtă

• Deschideți proprietățile aplicației web
• Faceți clic pe Configurare...
• Sub fila Mapări, faceți clic pe Adăugare
• Executabil: Introduceți aceeași valoare care este configurată pentru extensia ASPX sub fila Mapări
• Extensie: .less
• Verbe: Verificare: Limitare la, Introduce: GET, HEAD
• Motor de script: Verificat
• Verificați dacă fișierul există: Necăutat

Versiunea grafică dacă ajută pe cineva: Iată un link cu detaliile pe care le-am redat mai jos în caz că dispare.

http://wiki.uiowa.edu/display/~mbergal/2012/06/08/Configurarea+IIS+6+pentru+a+suporta+dotlesscss+(LESS+CSS)

Accesați proprietățile site-ului.

Deschide configurația

Adaugă extensia