¿Qué podría hacer que el mismo navegador en diferentes PC represente el mismo HTML de manera diferente?
https://stackoverflow.com/questions/1224796
-
22-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy perplejo. Un cliente y yo estamos ejecutando Firefox 3.0.12 en máquinas XP. Vemos la misma página en el mismo navegador en diferentes máquinas y tenemos resultados diferentes. Nota: Todos los navegadores IE son consistentes en ambas máquinas, y mi FF 3.5.1 es consistente con mi FF 3.0.12. (No tiene instalado FF 3.5.x para comparar).
Hay una diferencia de 1 píxel que hace que su división de encabezado (todas las imágenes, sin texto) se ajuste. La mía está bien. Si amplío su encabezado en 1 px (a través de la edición Firebug css), funciona.
Entonces, mi pregunta es ¿qué otras variables hay que afectan la representación?
Estoy tratando de pensar "fuera de la caja" porque parece que debería funcionar exactamente igual.
Borramos la memoria caché del navegador. Hice una diferencia en la fuente HTML, y aparte de un sello de fecha y hora de JavaScript y un código de seguimiento de JavaScript var, las fuentes son idénticas.
Sé que esta pregunta sería útil con la fuente, pero mi cliente específicamente aún no quiere que esta página esté en vivo en Internet. También verifiqué el problema a través de una sesión de webex. Al principio, no podía creer que tendríamos resultados diferentes.
¿Alguien más se ha encontrado con algo como esto antes? ¿Qué debo verificar / depurar a continuación?
Editar: Hay muchas sugerencias que apuntan a las fuentes, pero el encabezado solo usa imágenes. Bueno, eso no es completamente cierto, hay divs que forman parte de un menú plegable, pero todo eso está configurado en display: none para el renderizado inicial, así que estoy pensando que es otra cosa.
Editar 2: he cambiado todo tipo de fuentes y tamaños (tanto la configuración de fuente predeterminada del sistema como dentro de Firefox) en mi computadora para intentar replicar el problema. Cambié el estilo de renderizado (tipo estándar vs. claro). Nada El problema casi definitivamente no está relacionado con la fuente. tendré que ver si puedo obtener más acceso a la computadora del cliente para replicar el problema.
Solución
Dado que no podemos echar un vistazo al sitio en nuestros propios navegadores, este es el proceso que usaría para tratar de resolver el problema:
Comience a eliminar bloques de código pieza por pieza hasta que los dos navegadores se vean iguales.
-
Cualquiera que sea el bloque de código que eliminó por última vez que hizo que todo se alineara perfectamente (incluso si le falta un trozo del cuerpo), está cerca de donde está el culpable.
-
Como ha encontrado al culpable, coloque todo el código nuevamente. Comience a jugar con las fuentes primero. Cambie las fuentes, los tamaños, elimine el texto, etc. hasta que pueda encontrar una condición en la que los navegadores sean los mismos. Si no se trata de un problema de fuente, comience a jugar con otras partes hasta que haya encontró la condición que coincide.
-
Una vez que haya hecho eso, sabrá su problema y podrá solucionarlo.
Otros consejos
SI está usando Firefox, asegúrese de presionar Ctrl-0 para predeterminar el nivel de zoom.
Sé que mi FF3.0 hace que todo se vea diferente al de otras personas porque lo tengo configurado en Preferencias para usar un tamaño de fuente mínimo de 16. No obtengo letra pequeña, recibo un montón de escritura legible.
Además, al estar en una Mac, las fuentes predeterminadas son sans serif, mientras que en Windows todo es serif, lo que también puede cambiar el ancho y la altura de las fuentes aún más.
Si algo en su página se especifica con " em " o "ex" unidades, dependen del tamaño de fuente.
Compararía complementos / complementos.
¿Qué tal la configuración de suavizado de fuente? ¿Son iguales (none / antialias / ClearType)? Eso puede cambiar el ancho de un texto determinado, y podría ser lo que estás buscando.
¿Ustedes dos usan exactamente el mismo tamaño de pantalla? ¿Firefox intenta escalar las fuentes al tamaño aparente de la persona que ve la página, o a un número específico de píxeles?
Una cosa que viene a la mente son las fuentes instaladas. Si tiene una fuente que el cliente no tiene, podría haber una diferencia de 1 píxel en un tamaño calculado. FF e IE podrían estar redondeando de manera diferente, lo que explicaría por qué se comportan de manera diferente.
Estoy de acuerdo en su mayoría con todos los '' tipos de fuente '' más arriba, pero si eso no ayuda, intente verificar los encabezados HTTP ya que algunos encabezados pueden ser agregados por servidores proxy y similares entre el servidor y su cliente. Pero primero pruebe las sugerencias de fuentes ...
Buena suerte;)
Los diferentes sistemas operativos tienen diferentes motores de representación de fuentes. Muy diferente. Más que suficiente para causar al menos una diferencia de 1 píxel, dependiendo de cómo configure su CSS.
Mi primera suposición es algo que tiene que ver con la ventana, no recuerdo que esto haya sucedido en Firefox, pero intente cambiar el tamaño de la ventana de todos modos. También es posible que realmente haya algo de 1px de ancho ocupando ese espacio, como un marco oculto o cualquier otra cosa. Estos pueden estar completamente fuera de lugar ya que no sé cómo hiciste la cosa.
Una posible solución es mostrar una de las imágenes como fondo de un div en lugar de usar una etiqueta img, esto hará que simplemente se trunca en lugar de ajustarse si está 1px apagado.
Vi este problema una vez, y resultó que el usuario había ampliado la página, y el zoom causó problemas de redondeo matemático. Inadvertidamente amplié mi página al 120%, tenían solo el 100% normal.
Con la actualización actual en el navegador, la configuración del zoom del navegador toma la configuración de dpi del sistema.
En Windows 7, establecer ppp = 125% producirá el efecto de zoom al 100% de zoom de la ventana del navegador.
Entonces, esto no está relacionado con HTML. es decir, una configuración de ancho = 300 px producirá un cuadro de diferente tamaño en el mismo navegador con la misma configuración de zoom pero con diferentes configuraciones de dpi.
Dpi = 125% producirá una caja más grande.
Entonces, si desea reducir el nivel de zoom, aleje el navegador presionando ctrl + -, o reduzca la configuración de dpi del sistema siguiendo los pasos
