2

¿Cómo puedo poner unos estilos en específico para Safari? .No se me visualiza bien en ese navegador. Así es como se ve y este mi código:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

/* Contenedor de el banner */
    .contenedor-titulo{
        background-image: url(/img/hero.jpg);
        background-position: top center;
        background-size: cover;
        display: flex;
        color: white;
        padding-left: 3rem;
        align-items: center;
        justify-content: space-between;
    }
    /* Contenedor del logo de bachilleres */
    .logo-bacho{
        padding-right: 15rem;
        align-self: flex-end;
    }
    /* Selector para el tamaño del logo de bacho */
    .logo-bacho img{
        width: 12rem;
        height: 15rem;
    }
    /* Div del titulo de compras */
    .titulo-compras{
        font-size: 3rem;

    }

    /* Barra de degradado debajo del banner */
    .barra {
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        padding: 2rem;
        background: #741d51; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #741d51 0%,#e44e52 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#741d51', endColorstr='#e44e52',GradientType=1 ); /* IE6-9 */
        ;
    }
3
  • 1
    Hola Jorge, sería excelente si nos presentaras un problema específico, el código que hiciste para intentar resolver el problema y especificar que pieza del mismo es la que falla
    – Héctor M.
    Commented el 28 may. 2020 a las 6:20
  • 1
    O, al menos, un ejemplo de CSS que se ve diferente en Safari con una captura de cómo se ve allí. Es probable que, simplemente, "forzando" un estilo se solucione. Commented el 28 may. 2020 a las 6:25
  • Listo, agregue el codigo y como se ve en Safari
    – Jorge
    Commented el 28 may. 2020 a las 7:16

1 respuesta 1

2

Seguramente si tiene problemas de visualización en un único navegador, en este caso Safari, debería revisar el código para ver qué esta fallando concretamente, puede ser casos en que se este sobrescribiendo líneas de código o bien los estilos no se utilizan debidamente.

Te dejo unos ejemplos de código para aplicar estilos en Safari únicamente.

Este código funciona correctamente en Safari 13 (2020)

/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
  // Código
}

Si el primero no te funciona, puedes probar esto también.

/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) {
   .safari_only {
      // Código
   }
}

En el caso que utilices SASS/SCSS puedes probar:

/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) {
    .safari_only {
      // Código
    }
  }
}

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.