Recherche de site Web

javascript - Hébergement ASP.Net avec HTML5 JS et Twitter Bootstrap formate différemment

Dans mon environnement de développement, tout apparaît parfaitement bien, j'ai un graphique en secteurs qui utilise un canvas et une animation, cela apparaît bien lorsqu'on l'héberge via le navigateur.

J'utilise également Twitter Bootstrap et j'ai une barre de navigation en haut de la page, qui contient deux éléments.

Voici quelques exemples :

En environnement de développement

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

Hébergement dans IIS

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

Après avoir écarté la version IIS, l'erreur reste constante, vous pouvez également remarquer que l'arrondi du bouton n'est pas tout à fait le même.

Nous hébergeons sur IIS6 avec les paramètres par défaut, donc nous nous demandons si quelque chose doit être fait sur le site pour intégrer cela correctement ? Je ne pense pas que j'enregistre le .LESS quelque part, donc je ne suis pas sûr que ce soit ce qui pourrait causer cela.

Merci d'avance.

Réponse n°1

Vous devez définir la balise meta X-UA-Compatible afin de résoudre ce problème. Ajoutez la balise meta suivante à l'en-tête de votre page web et le problème devrait être résolu.

Cela garantira qu'il aura le même aspect en développement et sur IIS. (en utilisant le même navigateur)

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

Vous pouvez également ajouter la directive suivante dans votre web.config pour ajouter un en-tête personnalisé à l'échelle de l'application au lieu de la balise meta par page.

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

Ce comportement est causé parce qu'IE affiche les sites intranet en mode de compatibilité par défaut. (parce que Microsoft pense qu'un grand nombre de sites intranet sont obsolètes, je suppose) Vous pouvez modifier cela en allant dans Outils -> Paramètres du mode de compatibilité.

Références :

  • 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éponse n°2

On dirait que vous utilisez LESS, est-ce correct ? Si c'est le cas, comme vous l'avez mentionné, vous devez le configurer dans IIS pour utiliser le Twitter Bootstrap si vous utilisez ces fonctionnalités qui nécessitent LESS.

J'ai rencontré des problèmes similaires avec IIS et j'ai réussi à le faire reconnaître correctement les extensions de fichiers lorsqu'elles ne sont pas par défaut dans IIS.

Il y a de fortes chances que votre localhost ne soit pas aussi protecteur concernant les mappages de fichiers ou que vous utilisiez une version différente d'IIS localement par rapport à IIS6 et qu'elle autorise déjà l'extension .less.

Pour résoudre cela, vous devez ajouter l'extension/le mappage à IIS6.

Version courte

  • Ouvrir les propriétés de l'application web
  • Cliquez sur Configuration...
  • Sous l'onglet Mappings, cliquez sur Ajouter
  • Exécutable : Saisissez la même valeur que celle configurée pour l'extension ASPX sous l'onglet Mappages
  • Extension : .less
  • Verbes : Vérifier : Limiter à, Entrer : GET,HEAD
  • Moteur de script : Vérifié
  • Vérifier que le fichier existe : Non coché

Version graphique si cela peut aider quelqu'un : Voici un lien avec des détails que j'ai reproduits ci-dessous au cas où il disparaîtrait.

http://wiki.uiowa.edu/display/~mbergal/2012/06/08/Configuration+de+IIS+6+pour+prendre+en+charge+dotlesscss+(LESS+CSS)

Allez dans les propriétés du site.

Ouvrir la configuration

Ajouter l'extension