Q

CSS se representa de manera diferente en el servidor web que en el entorno de desarrollo

css

2009-12-08 18 views 55 likes

55

Tengo este problema donde la aplicación web que he creado en mi entorno de desarrollo, se muestra de manera diferente después de que lo cargue en el servidor web.CSS se representa de manera diferente en el servidor web que en el entorno de desarrollo

Estoy usando el mismo navegador y la misma máquina para ver las páginas. Lo único diferente, es el "servidor". Estoy usando .net 3.5 y en mi entorno de desarrollo las páginas se sirven usando el servidor de desarrollo ASP.net. En el servidor web, las páginas se sirven con IIS 6.0.

Tengo solo un único archivo CSS que está dentro de la carpeta "App_Themes/Default" que se utiliza para controlar todo el CSS en mi aplicación.

Estas son algunas de las cosas que no muestran la misma:

1) Tengo un control de panel plegable que cuando se expande se supone que mostrar en la parte superior de todos los demás elementos de la página. En el entorno de desarrollo, se comporta correctamente. En el servidor web, el panel se desliza debajo de los otros elementos.

2) Tengo mi elemento definido con un fondo y un cierto tamaño de fuente. Cuando se muestra en mi entorno de desarrollo, el texto aparece en una línea. Sin embargo, en el servidor web, el texto se envuelve aunque el texto tenga el mismo tamaño. Es como si el div que contiene de alguna manera se vuelve "más pequeño".

3) El ancho de los botones que no tienen un ancho fijo (por lo que el ancho está determinado por el texto del botón) es diferente entre el entorno de desarrollo y el servidor web. Los bottons en el servidor son siempre más amplios.

Comprobé para asegurarme de que no hay referencias a otros elementos CSS en machine.config y global web.config en el servidor y en mi entorno de desarrollo.

Sé que el servidor está leyendo desde el CSS porque, en general, se ve similar (los mismos colores, fondos, estilo de fuente, etc.). Es solo que los tamaños parecen estar apagados y las capas de los divs.

¿Alguien ha tenido este problema antes? ¿Alguna idea de lo que podría buscar?

2009-12-08 Amanda Myer

+0

Asegúrese de que la codificación de caracteres esté configurada correctamente en los encabezados de todos los archivos HTML de salida, y también declarada correctamente. Asegúrese de haber guardado los archivos con el formato de codificación correcto. – Breakthrough

+1

Lo primero que verificaría es el caché del navegador si su CSS ha sido sometido a muchas revisiones recientemente. También puede usar algo como Firebug de Firefox para verificar qué CSS se aplica a cada elemento DOM. Una ubicación web que demuestra lo que le muestra su servidor web o, si es posible, algún código CSS puede ayudar a buscar más. –

A

Respuesta

10

Esto al menos suena como que el servidor de producción agregó una declaración xml al HTML o cambió el doctype que causó que la página se procesara en modo no compatible con los estándares. Esto también se conoce como modo peculiar, ves esto muy bien en MSIE. Los síntomas que describió son reconocibles como box model bug in MSIE.

Haga clic con el botón derecho en las páginas y consulte la fuente HTML. ¿Son ambos exactamente lo mismo? (incluyendo metaetiquetas, declaración xml, espacio en blanco, etc.)

Si está transfiriendo FTP de Windows a Linux, asegúrese de que está transfiriendo en modo binario para asegurarse de que los espacios en blanco (espacios, saltos de línea) permanecen sin cambios . Asegúrese también de que está guardando documentos como UTF-8 (o al menos ISO-8859-1) y NO como codificación propiedad de MS, como CP1252.

2009-12-08 14:41:30 BalusC

+0

Estoy viendo la fuente HTML ahora mismo usando una herramienta DIFF y definitivamente NO son lo mismo. Sin embargo, el tipo DOC es el mismo. ¿Hay alguna otra diferencia que sería una bandera roja? –

+0

Espacios en blanco incorrectos antes de que la declaración del tipo de documento active también MSIE en el modo peculiar. Ese puede ser cualquier caracter que no sea '\ s',' \ t', '\ r' o' \ n', como '\ u00a0'. – BalusC

+0

Buen día. He estado teniendo el problema similar, consulte mis hilos: [uno] (http://stackoverflow.com/questions/39711761/why-rdlc-report-renders-differently-in-different-environments/39729635#39729635) , [y dos] (http://stackoverflow.com/questions/39732671/what-causes-an-override-of-http-equiv-x-ua-compatible-content-ie-edge-chrome). He comparado los archivos fuente para ambos, son idénticos en términos de metaetiquetas, declaración xml, espacios en blanco. ¿Cómo procedo ahora? –

4

El CSS que proviene del servidor puede ser una versión almacenada en caché anterior; intente actualizar la página con Ctrl + F5 para volver a solicitarla.

2009-12-08 14:48:10 Oded

+0

Creo que te refieres a Ctrl-F5 – Kzqai

+0

Gracias, corregido ahora. – Oded

+0

¡Gracias! El problema me pasó en los últimos 3 días y no sabía qué hacer. Lo sé, esta es una vieja pregunta, pero ¿puedes explicar qué hace que sea un navegador refrescante diferente con F5 o Ctrl F5? – RubahMalam

-1

Esto me pasa a menudo cuando la versión del 'servidor' se almacena en caché de alguna manera. Refrescar hizo el truco. Tirar "archivos temporales de internet" también lo hace.

2009-12-08 14:48:13 xtofl

71

Parece que los está comparando en Internet Explorer 8. Microsoft introdujo diferentes modos de representación para servidores locales e Internet para que los desarrolladores web se rompan en lágrimas.

Si no hay X-UA-Compatible valor y el sitio está en zona de seguridad Intranet local, que se representará en el modo EmulateIE7 por defecto.

Agregue el encabezado compatible con X-UA o META para forzar el modo de estándares de IE8 completo.

Ver también http://sharovatov.wordpress.com/2009/05/18/ie8-rendering-modes-theory-and-practice/

2009-12-08 15:23:05 Quentin

+7

MUCHAS GRACIAS. Oh, Dios mío, esto resolvió muchos problemas – DFTR

+11

No entiendo por qué existe esto pero afortunadamente lo encontré antes del suicidio. –

+20

"Microsoft introdujo diferentes modos de procesamiento para servidores locales e Internet para que los desarrolladores web se rompa en llanto" - Estaba llorando y riendo al mismo tiempo que lo leí. Tan cierto, pero tan triste! –

9

Para aquellos de ustedes que están teniendo este problema en un sitio de Intranet establecer la etiqueta meta no se solucionará el problema si los "sitios de intranet de pantalla en vista de compatibilidad" está marcada en (la cual es en muchos casos)

tienes que enviar la cabecera de respuesta HTTP a nivel de servidor, vemos here

2011-02-28 20:40:24 Migs

+0

Muchas gracias. ¡Todo el día he estado luchando con esto! – Wilky

18

estábamos teniendo un problema con los modos de compatibilidad también, así que terminé simplemente añadiendo:

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

Como sabía que funcionaba bien en Internet Explorer 7, 8 y 9.

2012-10-24 12:51:19

+0

Muchas gracias, Me salvaste el día :) –

+0

¡Esto ayudó un montón muchas gracias! Mis páginas eran perfectas en Firefox y Chrome, entonces abres IE y te gusta OMG !!!!! ¡Agregó esto y arregló todo perfectamente! ¡Gracias por tu publicación! ps- ¡nunca comento un buen trabajo! –

+0

@DavidBrierton ¡Me alegro de ayudarte! IE es un poco doloroso, ¿no? –

0

que acaba de tener este problema. Cambié mi hoja de estilo y el código HTML. Se veía muy bien a nivel local, pero no funcionó en el servidor. Descubrí que en Visual Studio el archivo "Copiar en el directorio de salida" del archivo CSS estaba configurado en "No copiar". Entonces mis actualizaciones de CSS no se estaban implementando. Algunas veces el problema es solo un error del usuario.

2013-01-14 18:47:13

5

Juste agregar esto a su archivo web.config:

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

2013-04-12 13:51:03 Portekoi

5

tuvimos el mismo problema, fijada en IE9 & EI11 con esto:

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

2014-08-27 05:49:28 MJP

-2

probar esto ,.

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

2014-10-19 15:47:21

9

Tuve el mismo problema en Google Chrome. Aparentemente las consultas de los medios se arruinan si la página se acerca o aleja. Asegúrate de que tu nivel de zoom sea del 100% para ambos sitios.

2015-04-24 23:37:42 rostam

6

Para mí, de Internet Explorer Compatibility View Settings era la cuestión:

Después de las casillas eran ONU-set, el CSS renders perfectamente

2016-05-26 06:08:48 xameeramir

+1

Te amo. Estaba a punto de lanzar mi PC y mi proyecto y luego a mí mismo fuera de la ventana – KentGeek

+0

@KentGeek Me alegro de poder ayudarte :) – xameeramir

1

que tenía el mismo problema Nuestra red utiliza Win7 con IE11 en todo momento. Para mí, la solución era, en mi máquina local, agregar "localhost" a la lista en la configuración de compatibilidad de IE> "Sitios web que ha agregado a la Vista de compatibilidad". IE> Herramientas> Compatibilidad Ver configuraciones.

BTW nuestra NA tiene cada configuración de máquina IE11 para "Mostrar sitios de intranet en la Vista de compatibilidad" verificada automáticamente por una política de grupo.

2016-09-21 18:26:32 Doreen

-2

Puede ser causado por la minificación, p. en la máquina dev tiene

<span>AAA</span> 
<span>BBB</span>

pero en el servidor remoto se convierte en

<span>AAA</span><span>BBB</span>

y un espacio entre ellos se pierde.

2016-11-17 21:50:18

+0

Tuve exactamente este mismo problema, no sé por qué muchas copias de la misma solución están subidas de tono y este que es uno de los pocos tenía -2 ... –

Cuestiones relacionadas