CSS s'affiche différemment sur le serveur Web que sur l'environnement de développement

Question

J'ai ce problème lorsque l'application web que j'ai créé dans mon environnement de développement, affiche différemment après je le télécharge sur le serveur web.

Je suis en utilisant le même navigateur et la même machine pour afficher les pages. La seule chose différente, est le "serveur". Je suis à l'aide .net 3.5 et sur mon environnement de développement les pages sont servis à l'aide de la ASP.net Serveur de Développement. Sur le serveur web, les pages sont servis à l'aide de IIS 6.0.

Je n'ai qu'un seul fichier CSS qui est contenue dans la "App_Themes/dossier par Défaut qui est utilisé pour le contrôle de tous les CSS dans mon application.

Voici quelques-uns des choses qui n'affichent pas la même:

1) j'ai un pliable de panneau de contrôle qui, une fois dépliée est censé montrer au-dessus de tous les autres éléments de la page. Sur l'environnement de dev, il se comporte correctement. Sur le serveur web, le panneau se glisse sous les autres éléments.

2) j'ai mon élément défini avec un fond et une certaine taille de la police. Lorsqu'il est affiché sur mon environnement de développement, le texte s'affiche sur une seule ligne. Cependant, sur le serveur web, le texte est justifié, même si le texte est de la même taille. C'est comme si le div contenant est en quelque sorte rendu "plus petits".

3) La largeur des boutons qui n'ont pas de largeur fixe (si la largeur est déterminée par le texte du bouton) est différente entre l'environnement de développement et le serveur web. Les boutons sur le serveur sont toujours plus large.

J'ai vérifié pour s'assurer il n'y a pas de références à d'autres CSS des éléments de la machine.config et le web mondial.config sur le serveur et sur mon environnement de développement.

Je sais que le serveur est de la lecture de la CSS, car en général, il ressemble (même les couleurs, les décors, le style de police, etc). C'est juste que la taille semble être désactivé et la superposition des divs.

Quelqu'un a exécuté ce problème avant? Toutes les idées de ce que je pourrais chercher?

Answer 1

On dirait que vous êtes en les comparant dans Internet Explorer 8. Microsoft a présenté les différents modes de rendu pour les serveurs locaux et Internet, de sorte que les développeurs web serait de fondre en larmes.

Si il n'y a pas de X-UA-Compatible valeur et le site est en Zone de sécurité Intranet Local, il sera rendu dans EmulateIE7 mode par défaut.

Ajouter X-UA-Compatible-tête ou le META pour forcer une IE8 normes de la mode.

Voir aussi http://sharovatov.wordpress.com/2009/05/18/ie8-rendering-modes-theory-and-practice/

Answer 2

Nous avions aussi un problème avec les modes de compatibilité, alors j'ai simplement ajouté:

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

Depuis que je savais que cela fonctionnait bien dans IE7, 8 et 9.

Answer 3

Ce qui semble le serveur de production a ajouté une déclaration xml HTML ou changer le doctype qui a causé la page en cours de rendu non-conforme aux normes mode. Ceci est également connu comme mode quirks, à vous de voir ce très bon retour dans MSIE. Les symptômes que vous décrivez sont recognizeable comme modèle de boîte de bug dans MSIE.

Cliquez avec le bouton droit de la pages et de vérifier le code source HTML. Les deux sont-ils exactement la même chose? (y compris les balises meta, la déclaration xml, espaces, etc)

Si vous êtes FTP avec de Windows à Linux, veuillez vous assurer que vous effectuez un transfert en mode binaire pour s'assurer que les espaces (espaces, retours à la ligne () demeurent inchangés. Également vous assurer que vous êtes en train d'enregistrer des documents en tant que UTF-8 (ou, au moins, ISO-8859-1) et non PAS comme MS-encodage propriétaire comme CP1252.

Answer 4

Pour ceux d'entre vous qui rencontrent ce problème dans un site intranet, le paramétrage de la balise META ne résoudra pas le problème si l'option "Afficher les sites intranet en mode compatibilité" est cochée (ce qui est souvent le cas).

Vous devez envoyer l'en-tête de réponse HTTP au niveau du serveur, voir ici

Answer 5

Ajoutez juste ceci à votre fichier web.config:

 <system.webServer>
    <httpProtocol>
        <customHeaders>
            <clear />
            <add name="X-UA-Compatible" value="IE=8" />
        </customHeaders>
  </httpProtocol>
</system.webServer>