Tema: Mal en Safari y bien en Chrome
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/01/2016, 07:32
diegoguerrero
 
Fecha de Ingreso: diciembre-2014
Ubicación: Madrid
Mensajes: 274
Antigüedad: 9 años, 11 meses
Puntos: 5
Mal en Safari y bien en Chrome
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
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Educamos</title>
  6. <link rel="stylesheet" href="Estilos/Estilos.css">
  7. </head>
  8. <body>
  9. <form action="Acceder.php" method="get">
  10.     <div class="PanelLogin">
  11.             <div class="Arriba">    
  12.                 <img src="Imagenes/LogoColegio.jpg" alt="LogoColegio">
  13.                 <div class="TituloColegio">La Inmaculada-Marillac</div>
  14.             </div>
  15.             <div class="Abajo">
  16.                 <div class="CajaCampo">
  17.                     <div class="AlertaError Ancho100">Mal vamos...</div>
  18.                 </div>
  19.                 <div class="CajaCampo">
  20.                     <label class="InputLabel">Nombre de usuario</label>
  21.                     <input type="text" class="InputText" name="NombreUsuario">
  22.                 </div>
  23.                 <div class="CajaCampo">
  24.                     <label class="InputLabel">Contraseña</label>
  25.                     <input type="password" class="InputText" name="Contraseña">
  26.                 </div>
  27.                 <div class="CajaCampo">
  28.                     <button class="Boton1" type="submit">Acceder</button>
  29.                 </div>
  30.                 <div class="CajaCampo Reg12">
  31.                     He olvidado mis claves de acceso
  32.                 </div>
  33.             </div>
  34.         </div>
  35. </form>
  36. <div class="Fondo">
  37.     <img src="Imagenes/HeroLimpia.jpg"  class="ImagenFondoBody" alt="AA">
  38. </div>
  39. </body>
  40. </html>
Código CSS: 
Ver original
  1. body{
  2.     font-family: "Open Sans";
  3.     display: block;
  4. }
  5. .ImagenFondoBody{
  6.     background-image: url(Imagenes/HeroLimpia.jpg);
  7.     -webkit-filter: blur(30px);
  8.     -moz-filter: blur(30px);
  9.     -o-filter: blur(30px);
  10.     -ms-filter: blur(30px);
  11.     filter: blur(30px);
  12.     text-align:center;
  13.     height:100%;
  14.     width: 100%;
  15. }
  16. .Fondo{
  17.     width: 100%; 
  18.     height: 100%; 
  19.     position: fixed; 
  20.     left: 0px; 
  21.     top: 0px; 
  22.     z-index: -1;
  23. }
  24. .PanelLogin{
  25.     box-shadow: 0 0 10px 10px #FFF;
  26.     width: 30%;
  27.     position: absolute;
  28.     top: 50%; 
  29.     left: 50%;
  30.     transform: translate(-50%, -50%);
  31.     z-index: 10;
  32.     padding: 30px;
  33.     border-radius: 30px;
  34.     background-color: #FFF;
  35. }
  36. .Arriba{
  37.     text-align:center;
  38.     width: 100%;
  39.     margin-bottom: 20px;
  40. }
  41. .TituloColegio{
  42.     text-align: center;
  43.     font: 600 20px "Open Sans";
  44.     color: #0072C6;
  45. }
  46. .Abajo{
  47.     width: 100%;
  48. }
  49. .CajaCampo{
  50.     margin: 10px 0px;
  51. }
Safari: http://www.subeimagenes.com/img/capt...07-1606236.png
Chrome: http://www.subeimagenes.com/img/capt...24-1606237.png