javascript - ASP.Netin isännöinti HTML5 JS:n ja Twitter Bootstrapin kanssa muotoilee eri tavalla

Kehitysympäristössäni kaikki näyttää täydelliseltä, minulla on piirakkakaavio, joka käyttää canvasia ja animaatiota, ja tämä näkyy oikein, kun isännöin sen selaimen kautta.

Käytän myös Twitter Bootstrapia ja minulla on navigointipalkki sivun yläosassa, jossa on kaksi kohdetta.

Tässä on joitakin esimerkkejä:

Kehitysympäristössä

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

Isännöinti IIS:ssä

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

IIS-version hylkäämisen jälkeen virhe pysyy vakiona, lisäksi voit huomata, että napin pyöristys ei ole aivan sama.

Isännöimme IIS6:lla oletusasetuksilla, joten mietin, pitääkö sivustolla tehdä jotain tämän asian asianmukaista käyttöönottoa varten? En ole rekisteröimässä .LESS-tiedostoa missään, en usko, joten en ole varma, voisiko se olla tämän ongelman syy.

Kiitos etukäteen.

Vastaus #1

Sinun täytyy asettaa X-UA-Compatible-meta-tunniste korjataksesi tämän. Lisää seuraava meta-tunniste sivustosi otsikkoon, niin ongelma pitäisi ratkaista

Tämä varmistaa, että se näyttää samalta kehityksessä ja IIS:ssä. (käyttäen samaa selainta)

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

Voit myös lisätä seuraavan direktiivin web.config-tiedostoosi lisätäksesi mukautetun otsikon sovelluslaajuisesti sen sijaan, että käyttäisit yksittäisen sivun meta-tunnistetta.

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

Tämä käyttäytyminen johtuu siitä, että IE näyttää intranet-sivustot oletuksena yhteensopivuustilassa. (Koska Microsoftin mielestä monet intranet-sivustot ovat vanhentuneita, arvelen) Voit muuttaa tätä siirtymällä Työkalut -> Yhteensopivuusnäkymän asetukset.

Viitteet :

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

Vastaus #2

Kuulostaa siltä, että käytät LESS:ää, onko se oikein? Jos näin on, kuten mainitsit, sinun täytyy asettaa se IIS:ssä käyttämään Twitter Bootstrapia, jos käytät niitä ominaisuuksia, jotka vaativat LESS:ää.

Minulla on ollut samanlaisia ongelmia IIS:n kanssa, ja olen saanut sen tunnistamaan tiedostopäätteet oikein, vaikka ne eivät ole oletuksia IIS:ssä.

On todennäköistä, että sinun localhost ei ole yhtä suojattu tiedostokartoitusten suhteen tai käytät paikallisesti eri versiota IIS:stä kuin IIS6, ja se sallii jo .less-tiedostopäätteen.

Korjataksesi tämän, sinun täytyy lisätä laajennus/määritys IIS6:een.

Lyhyt versio

Avaa verkkosovelluksen ominaisuudet
Napsauta Määritykset...
Valitse Mappings-välilehti ja napsauta Add
Suoritettava: Syötä sama arvo, joka on asetettu ASPX-laajennukselle Mappings-välilehdellä
Laajennus: .less
Verbit: Tarkista: Rajoita, Syötä: GET, HEAD
Script Engine: Tarkistettu
Tarkista, että tiedosto on olemassa: Ei valittu

Graafinen versio, jos siitä on kenellekään apua: Tässä on linkki yksityiskohtiin, jotka olen jäljentänyt alle siltä varalta, että se katoaa.

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

Siirry sivuston ominaisuuksiin.

Avaa asetukset

Lisää laajennus