[SOLUCIONADO] Mal en Safari y bien en Chrome

diegoguerrero · #1 (**permalink**) 17/01/2016, 07:32

Tengo este código CSS para la página HTML y no entiendo por qué en Chrome (y Firefox) se ve bien pero en Safari no. ¿Por qué?

Código HTML:

Ver original<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Educamos</title>
<link rel="stylesheet" href="Estilos/Estilos.css">
</head>
<body>
<form action="Acceder.php" method="get">
    <div class="PanelLogin">
            <div class="Arriba">    
                <img src="Imagenes/LogoColegio.jpg" alt="LogoColegio">
                <div class="TituloColegio">La Inmaculada-Marillac</div>
            </div>
            <div class="Abajo">
                <div class="CajaCampo">
                    <div class="AlertaError Ancho100">Mal vamos...</div>
                </div>
                <div class="CajaCampo">
                    <label class="InputLabel">Nombre de usuario</label>
                    <input type="text" class="InputText" name="NombreUsuario">
                </div>
                <div class="CajaCampo">
                    <label class="InputLabel">Contraseña</label>
                    <input type="password" class="InputText" name="Contraseña">
                </div>
                <div class="CajaCampo">
                    <button class="Boton1" type="submit">Acceder</button>
                </div>
                <div class="CajaCampo Reg12">
                    He olvidado mis claves de acceso
                </div>
            </div>
        </div>
</form>
<div class="Fondo">
    <img src="Imagenes/HeroLimpia.jpg"  class="ImagenFondoBody" alt="AA">
</div>
</body>
</html>

Código CSS:

Ver originalbody{
    font-family: "Open Sans";
    display: block;
}
.ImagenFondoBody{
    background-image: url(Imagenes/HeroLimpia.jpg);
    -webkit-filter: blur(30px);
    -moz-filter: blur(30px);
    -o-filter: blur(30px);
    -ms-filter: blur(30px);
    filter: blur(30px);
    text-align:center;
    height:100%;
    width: 100%;
}
.Fondo{
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}
.PanelLogin{
    box-shadow: 0 0 10px 10px #FFF;
    width: 30%;
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    padding: 30px;
    border-radius: 30px;
    background-color: #FFF;
}
.Arriba{
    text-align:center;
    width: 100%;
    margin-bottom: 20px;
}
.TituloColegio{
    text-align: center;
    font: 600 20px "Open Sans";
    color: #0072C6;
}
.Abajo{
    width: 100%;
}
.CajaCampo{
    margin: 10px 0px;
}

Safari: http://www.subeimagenes.com/img/capt...07-1606236.png
Chrome: http://www.subeimagenes.com/img/capt...24-1606237.png

g3kdigital · #2 (**permalink**) 17/01/2016, 11:21

Hola otra vez.

Yo creo que deberías de redefinir que esta mal, porque yo veo las imágenes y solo veo diferencias sutiles como el color rojo un poco mas opaco y la tipografía un poco más light que en el otro, pero de resto lo veo igual.

La verdad deberías preocuparte por diferencias mas graves que se dan entre navegadores, como bloques y textos desbordados, espacios blancos donde no debería, animaciones, etc, porque es prácticamente imposible que te quede el mismo diseño, comenzando porque los motores diferentes de cada navegador: zafari es -webkit-, chrome ya no lo es, ahora es -blink- como opera (ultimas versiones), -trident- es para IE y -gecko- por mozzilla (o -servo-) en pocas palabras es casi imposible que exista un parecido 100% entre las presentaciones de cada navegador, como mucho un 90% y eso siendo ambicioso.

Sugerencia: sí para ti es muy importante utiliza una librería llamada reset.css o normalize.css que busca igualar las presentaciones de cada navegador en la medida de lo posible, pero la verdad yo que tu no me complicaría.

Éxitos.

diegoguerrero · #3 (**permalink**) 17/01/2016, 15:40

Cita:

Iniciado por g3kdigital

Hola otra vez.

Yo creo que deberías de redefinir que esta mal, porque yo veo las imágenes y solo veo diferencias sutiles como el color rojo un poco mas opaco y la tipografía un poco más light que en el otro, pero de resto lo veo igual.

La verdad deberías preocuparte por diferencias mas graves que se dan entre navegadores, como bloques y textos desbordados, espacios blancos donde no debería, animaciones, etc, porque es prácticamente imposible que te quede el mismo diseño, comenzando porque los motores diferentes de cada navegador: zafari es -webkit-, chrome ya no lo es, ahora es -blink- como opera (ultimas versiones), -trident- es para IE y -gecko- por mozzilla (o -servo-) en pocas palabras es casi imposible que exista un parecido 100% entre las presentaciones de cada navegador, como mucho un 90% y eso siendo ambicioso.

Sugerencia: sí para ti es muy importante utiliza una librería llamada reset.css o normalize.css que busca igualar las presentaciones de cada navegador en la medida de lo posible, pero la verdad yo que tu no me complicaría.

Éxitos.

Hola, g3kdigital

Lo que me preocupa son los bordes de los campos. ¿Cómo se podría arreglar eso?

Muchas gracias

g3kdigital · #4 (**permalink**) 17/01/2016, 22:05

Para los bordes, lo primero que se me ocurre es que los repintes con box-shadows:

Código CSS:

Ver originalinput
{
border: none;
box-shadow: inset 0 0 0 1px gray
}

diegoguerrero · #5 (**permalink**) 18/01/2016, 09:45

He hecho algunos cambios pero ahora se ve el div .PanelLogin y todo su contenido borroso, como si se vieras afectado por el blur del fondo. ¿Por qué? Aquí dejo el código.

Código CSS:

Ver originalbody{
    font-family: "Open Sans";
    display: block;
}
.ImagenFondoBody{
    background-image: url(Imagenes/HeroLimpia.jpg);
    -webkit-filter: blur(30px);
    -moz-filter: blur(30px);
    -o-filter: blur(30px);
    -ms-filter: blur(30px);
    filter: blur(30px);
    text-align:center;
    height:100%;
    width: 100%;
    z-index: -1;
}
.Fondo{
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
}
.PanelLogin{
    z-index: 1;
    box-shadow: 0 0 10px 10px #FFF;
    width: 30%;
    min-width: 300px;
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    border-radius: 30px;
    background-color: #FFF;
}
.Arriba{
    text-align:center;
    width: 100%;
    margin-bottom: 20px;
}
.TituloColegio{
    text-align: center;
    font: 600 20px "Open Sans";
    color: #0072C6;
}
.Abajo{
    width: 100%;
}
.CajaCampo{
    margin: 10px 0px;
}
.CampoTextoLogin{
    border: 1px solid #C0C0C0;
    color: #333;
    font-size: 13px;
    margin: 3px 0px 0px;
    padding: 0px 6px;
    width: 100%;
    height: 24px;
    display:block;
}
.CampoTextoLogin:focus{
    border: 1px solid #D2AB60;
    box-shadow: 0px 0px 2px 2px #F1CA7F;
    outline: medium none;
}

http://www.subeimagenes.com/img/capt...50-1607569.png

tiranium · #6 (**permalink**) 29/01/2016, 06:03

Cita:

Iniciado por g3kdigital

Hola otra vez.

Yo creo que deberías de redefinir que esta mal, porque yo veo las imágenes y solo veo diferencias sutiles como el color rojo un poco mas opaco y la tipografía un poco más light que en el otro, pero de resto lo veo igual.

La verdad deberías preocuparte por diferencias mas graves que se dan entre navegadores, como bloques y textos desbordados, espacios blancos donde no debería, animaciones, etc, porque es prácticamente imposible que te quede el mismo diseño, comenzando porque los motores diferentes de cada navegador: zafari es -webkit-, chrome ya no lo es, ahora es -blink- como opera (ultimas versiones), -trident- es para IE y -gecko- por mozzilla (o -servo-) en pocas palabras es casi imposible que exista un parecido 100% entre las presentaciones de cada navegador, como mucho un 90% y eso siendo ambicioso.

Sugerencia: sí para ti es muy importante utiliza una librería llamada reset.css o normalize.css que busca igualar las presentaciones de cada navegador en la medida de lo posible, pero la verdad yo que tu no me complicaría.

Éxitos.

Totalmente de acuerdo, yo te diría que no te compliques porque pierdes tu tiempo y tus clientes no van a apreciar el resultado por horas extras que dediques a perfeccionar estas diferencias. Como bien han dicho cada navegador es un mundo, por lo que conformate cuando se quede más o menos parecido.