Tengo un problema con estilos (CSS), he probado una página web en muchos exploradores, sin embargo en Safari no se ven mis botones con imagen, esto ocurre cuando está en vista landscape.
Mi botón tiene el sig. código, esta contenido dentro del contenedor:
.contenedor{
/* width: auto;
*/ /*margin-left: 10%;*/
height: auto;
background: #FFF;
padding: 1px;
border: 10px solid #FFF;
display: flex;
flex-flow: row wrap;
justify-content: center;
border:1px solid #fff;
z-index: 1;
}
.elemento{
color:#fff;
width: 180px;
background: #FFF;
text-align: center;
display: flex;
flex-flow: row;
justify-content: center;
border: 15px solid #fff;
z-index: 2;
}
/*--botones--*/
.button_1 {
background-image: url(../images/Declaratoria.png);
border: none;
background-repeat: no-repeat;
height: 3.45cm;
width: 4.34cm;
background-position: center;
opacity: 0.5;
z-index: 99px;
}
.button_2 {
background-image: url(../images/Bordereau.png);
border: none;
background-repeat: no-repeat;
height: 3.45cm;
width: 4.34cm;
background-position: center;
opacity: 0.5;
z-index: 99px;
}
.button_3 {
background-image: url(../images/Reporte_Fuerte_v2.png);
border: none;
background-repeat: no-repeat;
height: 3.45cm;
width: 4.34cm;
background-position: center;
opacity: 0.5;
z-index: 99px;
}
.button_4 {
background-image: url(../images/Busqueda1.png);
border: none;
background-repeat: no-repeat;
height: 3.45cm;
width: 4.30cm;
background-position: center;
opacity: 0.5;
z-index: 99px;
}
.button_5 {
background-image: url(../images/barrita.png);
border: none;
background-repeat: no-repeat;
border-radius: 25px 25px;
height: .7cm;
width: 5.05cm;
background-position: center;
opacity: 0.5;
z-index: 99px;
}
.button_6 {
background-image: url(../images/Documentos-claro.png);
border: #808185;
background-repeat: no-repeat;
border-radius: 25px 25px;
height: .6cm;
width: 5.1cm;
background-position: center;
opacity: 0.5;
z-index: 99px;
}
.button_7 {
background-image: url(../images/Reporte-Claro.png);
border: #808185;
background-repeat: no-repeat;
border-radius: 25px 25px;
height: .6cm;
width: 5.1cm;
background-position: center;
opacity: 0.5;
z-index: 99px;
}
.button_8 {
background-image: url(../images/IG-claro.png);
border: #808185;
background-repeat: no-repeat;
border-radius: 25px 25px;
height: .6cm;
width: 5.1cm;
background-position: center;
opacity: 0.5;
z-index: 99px;
}
.button_9 {
background-image: url(../images/Documentos-obscuro.png);
border: #808185;
background-repeat: no-repeat;
border-radius: 25px 25px;
height: .6cm;
width: 5.1cm;
background-position: center;
z-index: 99px;
}
.button_10 {
background-image: url(../images/Documentos-claro.png);
border: #808185;
background-repeat: no-repeat;
border-radius: 25px 25px;
height: .6cm;
width: 5.1cm;
background-position: center;
opacity: 0.5;
z-index: 99px;
}
.button_11 {
background-image: url(../images/Reporte-Obscuro.png);
border: #808185;
background-repeat: no-repeat;
border-radius: 25px 25px;
height: .6cm;
width: 5.1cm;
background-position: center;
z-index: 99px;
}
.button_12 {
background-image: url(../images/IG-obscuro.png);
border: #808185;
background-repeat: no-repeat;
border-radius: 25px 25px;
height: .6cm;
width: 5.1cm;
background-position: center;
z-index: 99px;
}
.button_alfa{
border: #808185;
background-repeat: no-repeat;
border-radius: 25px 25px;
height: .6cm;
width: 5.1cm;
background-position: center;
z-index: 99px;
}
.button_13{
border: #808185;
background-repeat: no-repeat;
border-radius: 9px 9px;
height: 1.2cm;
width: 5cm;
background-position: center;
}
#button1:active {
background: url(../images/Declaratoria.png) no-repeat bottom;
opacity: 100;
-webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}
#button2:active {
background: url(../images/Bordereau.png) no-repeat bottom;
opacity: 100;
-webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}
#button3:active {
background: url(../images/Reporte_Fuerte_v2.png) no-repeat bottom;
opacity: 100;
-webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}
#button4:active {
background: url(../images/Busqueda1.jpg) no-repeat bottom;
opacity: 100;
-webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}
#button5:active {
background: url(../images/barrita.png) no-repeat bottom;
opacity: 100;
-webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}
#button6:active {
background: url(../images/Documentos-obscuro.png) no-repeat bottom;
opacity: 100;
-webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}
#button7:active {
background: url(../images/Reporte-Obscuro.png) no-repeat bottom;
opacity: 100;
-webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}
#button8:active {
background: url(../images/IG-obscuro.png) no-repeat bottom;
opacity: 100;
-webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}
#button9:active {
background: url(../images/Documentos-obscuro.png) no-repeat bottom;
-webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}
#button10:active {
background: url(../images/Documentos-claro.png) no-repeat bottom;
-webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}
#button11:active {
background: url(../images/Reporte-Obscuro.png) no-repeat bottom;
opacity: 100;
-webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}
#button12:active {
background: url(../images/IG-obscuro.png) no-repeat bottom;
opacity: 100;
-webkit-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
box-shadow: 3px 7px 13px -2px rgba(0, 0, 0, 0.75);
}
<aside style=" margin-left: 25px; margin-right: 25px;">
<img src="<?=URL::to('Assets/Portal/images/inicio_ok.png')?>"/>
@if($conjuntoPermisos['cuadro_inicio_seccion_1'] == 1)
<div class="contenedor" style=" margin-top: -9%;">
<div class="elemento elemento1">
<a href="{{ URL::to('/Resumen_Declaratoria')}}">
<input style="margin-top:0px;" class="button_1" id="button1" onmouseout="this.style.opacity='.5'" onmouseover="this.style.opacity='100'" type="button"/>
</a>
</div>
<div class="elemento elemento2">
<a href="{{ URL::to('/Bordereau')}}">
<input style="margin-top:0px;" class="button_2" id="button2" onmouseout="this.style.opacity='.5'" onmouseover="this.style.opacity='100'" type="button"/>
</a>
</div>
<div class="elemento elemento3">
<a href="{{ URL::to('/Reporte')}}">
<input style="margin-top:0px;" class="button_3" id="button3" onmouseout="this.style.opacity='.5'" onmouseover="this.style.opacity='100'" type="button"/>
</a>
</div>
</div>
@else
<div class="contenedor" style=" margin-top: -9%; margin-left:60%;">
@if($conjuntoPermisos['cuadro_inicio_seccion_2'] == 1)
<div class="elemento elemento1">
<a href="{{ URL::to('/EA_Declaratorias')}}" id="AS" style="color:transparent;">
<img style="margin-top:0px;" width="150" height="150" src="<?=URL::to('Assets/Portal/images/EA_Claro.png')?>"/>
</a>
</div>
@endif
@if($conjuntoPermisos['cuadro_inicio_seccion_3'] == 1)
<div class="elemento elemento2">
<a href="{{ URL::to('/EI_Declaratorias')}}" id="EI" style="color:transparent;">
<img style="margin-top:0px;" width="150" height="150" src="<?=URL::to('Assets/Portal/images/EI_Claro.png')?>"/>
</a>
</div>
@endif
@if($conjuntoPermisos['cuadro_inicio_seccion_4'] == 1)
<div class="elemento elemento3">
<a href="{{ URL::to('/Admin')}}" id="AL" style="color:transparent;">
<img style="margin-top:0px;" width="150" height="150" src="<?=URL::to('Assets/Portal/images/AL_Fuerte.png')?>"/>
</a>
</div>
@endif
</div>
@endif
</aside>
Ya agregué varios meta, pero solo adapta el tamaño de la pantalla.
<script src="<?=URL::to('Assets/Portal/js/JQuery/jQuery-2.1.4.min.js?v=1.1')?>" type="text/javascript"></script>
<link href="<?=URL::to('Assets/Portal/css/StyleFlex.css?v=1.1')?>" media="all" rel="stylesheet" type="text/css"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input:focus{
outline: none;
}
</style>
<meta name = "viewport" content = "user-scalable=no, width=device-width">
<!--metas específicos-->
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta charset="utf-8">
<meta id="book-resource-type" name="book-resource-type" content="Guide">
<meta scheme="apple_ref" id="identifier" name="identifier" content="//apple_ref/doc/uid/TP40002051">
<meta id="document-version" name="document-version" content="16.5.0">
<meta id="xcode-display" name="xcode-display" content="render">
<meta id="IndexTitle" name="IndexTitle" content="Safari Web Content Guide: Configuring the Viewport">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
¿Qué puedo hacer? Espero me puedan ayudar.
**Nota: Me di cuenta que este problema no tiene que ver tanto con lo responsivo, puesto que lo probé en un Motorola, un S6 Edge y un mini S6 y no aparece ese problema, para mí que es el Safari porque también aparece el problema en el Iphone 6S.