Problemas de espaciado de CSS de Firefox entre sistemas operativos

Tengo un problema con Firefox. Se muestra de forma diferente en Windows que en OSX. Parece ser un problema de espaciado de fuente o tamaño de fuente, pero no puedo entenderlo. Ambos usan exactamente las mismas propiedades.

Ventana superior: Mac OSX, inferior: WinXP

CSS Mac vs Windows

Aquí está el HTML básico / Estilo Computado: enter image description here

¿Alguna idea de alguien?

preguntado el 16 de mayo de 11 a las 20:05

Ayudaría si publicas el HTML / CSS para mostrar esto:

3 Respuestas

Si espera crear la mejor experiencia en varios navegadores, algunos ajustes de CSS lograrán un diseño más tolerante y reducirán las diferencias en la representación de fuentes.

Por ejemplo, para mejorar su marcado actual, debe:

  • Posición flotante o absoluta <div class="topNav"> en la parte superior derecha de su elemento padre
  • Alinear a la derecha todo el texto dentro topNav

Esto asegurará que su navegación superior siempre crecerá hacia la izquierda y no irá más allá de la página a la derecha (como se muestra en la captura de pantalla inferior de Windows XP / Firefox).

Después de este cambio, las diferencias de fuente se reducirán, ya que el diseño puede crecer o expandirse con gracia mientras cambia el cartNav no romperá el diseño.

Mientras realiza estos cambios, puede considerar combinar los íconos de navegación secundaria en un Sprite de CSS.

Como desarrolladores web, estamos acostumbrados a probar los navegadores y presentar inconsistencias, pero considera que es muy poco probable que alguien más que tú. (quizás, por supuesto, un compañero desarrollador o cliente) compararía la forma en que el sitio se representa entre navegadores o sistemas operativos.

contestado el 17 de mayo de 11 a las 01:05

Nunca pensé que Firefox pudiera ser una diferencia tan grande entre los sistemas operativos (especialmente cuando IE se ve bien). ¡Gracias! - Adamzwakk

Lo más probable es que vea un delta debido a la fuente elegida. Solo hay un puñado de fuentes que son comunes en Windows y Mac, algunas de las cuales (Lucida Sans / Lucida Sans Unicode) contienen diferentes kerning en esas plataformas.

Sería muy útil ver la información de la fuente CSS de los elementos en cuestión.

Las soluciones (asumiendo que es el problema de kerning mencionado anteriormente):

  1. Elija una fuente que funcione mejor en ambas plataformas. Arial puede funcionar bien en este caso.

  2. Elija una fuente más estrecha y asegúrese de que funcione en ambas plataformas.

  3. Asegúrese de que el diseño pueda adaptarse a un ancho adicional. Creo que encontrará que tiene un problema en Windows si tiene 10 artículos en su carrito o supera los $ 100.

Puede usar cufon para esto, pero no soy un gran admirador de él debido a los problemas de licencia e impresión. Puede obtener una licencia de una fuente bastante barata de alguien como MyFonts.

contestado el 17 de mayo de 11 a las 00:05

Aparentemente, mi reputación es demasiado baja para comentar correctamente, pero veo que alguien ha sugerido un truco de espaciado de letras CSS. El espaciado entre letras usa límites de 1 px, que no es lo suficientemente fino para sus propósitos. Terminarás con mucho dolor de cabeza tratando de explorar ese camino. - John Green

La fuente debe ser Verdana en ambos sistemas operativos. Dudo que eso haga tanta diferencia entre los sistemas operativos, ¿verdad? - Adamzwakk

Sí, Verdana tiene un cambio bastante significativo entre los sistemas operativos. Tenga en cuenta que esto es una cosa del sistema operativo, no una cosa del navegador. Siempre puede utilizar una solución de renderizado múltiple como el BrowserLab de Adobe para ver las diferencias: browserlab.adobe.com - John Green

diferencias de kerning de fuente entre los sistemas operativos. Es MUY pirateado, pero si no puedes usar una fuente que sea más consistente entre versiones, siempre puedes piratear el kerning ... http://www.w3schools.com/css/pr_text_letter-spacing.asp

contestado el 17 de mayo de 11 a las 00:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.