Agencia de Marketing en sevilla

Propiedades CSS en Firefox: Inline-block y max-width

Índice del artículo

Cuando hicimos la página web de nuestros amigos de Acuarela Fotógrafos (utilizando el maravilloso tema Jupiter), nos encontramos con una sorpresa: al probar la página en Firefox, en vez de salir unas elegantes fotografías cuadradas como enlace a una muestra de fotografía de bodas, nos encontramos con esto.

Tras investigar utilizando la edición para desarrolladores de Firefox (muy recomendable, por cierto), descubrí el problema: el motor de renderizado de CSS de Firefox no entiende la propiedad max-width:100% si está dentro de un contenedor cuyo display está definido como inline-block.

La solución fue tan sencilla como añadir un “display:block;” a la clase del contenedor padre, pisando así el CSS original del tema y consiguiendo que las imágenes se vean perfectas en cualquier navegador.

Os preguntaréis, por cierto, por qué las imágenes son tan grandes: la respuesta es el diseño adaptado a móviles y las pantallas de alta definición tan vistas. El incremento de tamaño es ínfimo si se hace bien, y el visionado gana mucho..

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad
Abrir chat
Hola 👋
¿En quieres destacar sobre tu competencia? ¡Escríbeme!