1

Tengo una web, llamada http://ogar.pw y se ve bien en Chrome y en Internet Explorer, pero en firefox, no.. ¿por qué puedo ocurrir esto?

Así es como se ve en Chrome e IE:

Chrome e IE

Y así se ve en Firefox:

Firefox

Además, ¿existe algún programa que me muestre problemas de compatibilidad o algo? No sé qué está mal.

2
  • Sería ideal que movieras el código relevante a la pregunta en sí
    – Alvaro Montoro
    Commented el 2 jul. 2017 a las 1:25
  • Estaria bien y seria de mucha ayuda que pusieras tu codigo para ver. Pero de igual manera, estaria bueno que usaras librerias si no los usas como jQuery para tener compatibilidad entre los navegadores, con respecto a javascript. Tambien puedes consultar esta pagina para ver los codigos que son compatibles con navegadores. Can I Use Tambien esta pagina Hay disponibles tablas de compatibilidad tanto de CSS, el DOM y test de elementos HTML5 Compatibility overview
    – Darguello
    Commented el 2 jul. 2017 a las 1:27

1 respuesta 1

2

El problema se puede ver hasta sin poner el código en la pregunta: tienes un transform: translate(-50%, -50%) que se aplica bien en Chrome e IE, pero que sin el prefijo -moz- no se va a ver bien en Firefox.

Dentro de tu código en particular tienes esto:

#helloDialog {
    width: 400px;
    background-color: #FFFFFF;
    margin: 10px auto;
    padding: 5px 15px 5px 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    zoom: 80%;
    -moz-transform: scale(0.5, 0.5);
    -moz-transform-origin: left center;
}

Como puedes ver, hay un estilo definido específicamente para -moz-transform que no es el translate sino el scale y eso hace que se sobreescriba la transformación definida arriba y que no se aplique la translación del diálogo y se vea mal posicionado.

La solución es simple, se puede añadir múltiples transformaciones separadas por coma, así que añade el translate(-50%, -50%) al -moz-transform y problema resuelto:

#helloDialog {
    width: 400px;
    background-color: #FFFFFF;
    margin: 10px auto;
    padding: 5px 15px 5px 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    zoom: 80%;
    -moz-transform: translate(-50%, -50%), scale(0.5, 0.5);
    -moz-transform-origin: left center;
}

Así es como lo veo yo después de cambiar ese estilo en el inspector de elementos de Firefox:

introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.