Problemas con Safari y divs
Publicado por VRM (192 intervenciones) el 20/10/2015 21:04:50
Tengo un problema con Safari: cuando en una página un contenedor contiene a otro y el contenedor interno aparece la instrucción del CSS 'overflow: auto;' el contenedor interno no se muestra, incluso si ambos contenedores son espacialmente disjuntos (no se monta uno sobre otro). Esto no ocurre ni con Firefox ni con Chrome.
El código html es:
Y el CSS
La linea que da problemas es la última de '.general'. Además si el div cabecera se saca del general no hay problema; si se elimina la linea 'overflow: auto;' la imagen de cabecera se muestra bien, pero no se muestra la barra de desplazamiento si el div general se desborda.
Mi pregunta es: ¿es posible solucionar esto sólo cambiando el CSS?
Saludos de Víctor.-
El código html es:
1
2
3
4
5
6
7
8
echo "<div class='general'>";// Contenedor general
echo "<div class='cabecera'>";// Cabecera dentro de general
echo "<img src='../imagenes/cabecera.jpg' alt='Cabecera' height='50'>";
echo "</div>";
for ($i=0;$i<250;$i++){// Esto se hace para mostrar un mensaje largo en el div general
echo "<br/>linea $i";
}
echo "</div>";
Y el CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style type='text/CSS'>
.general {
/* posición */
position: fixed;
top: 110px;
bottom: 5px;
left: 50%;
width: 1000px;
margin-left: -500px;
/* Fondo y borde */
overflow: auto;/* Si se elimina esta linea todo funciona bien */
}
.cabecera {
/* posición */
position: fixed;
top: 0px;
left: 50%;
height: 50px;
width: 1000px;
margin-left: -500px;
}
</style>
La linea que da problemas es la última de '.general'. Además si el div cabecera se saca del general no hay problema; si se elimina la linea 'overflow: auto;' la imagen de cabecera se muestra bien, pero no se muestra la barra de desplazamiento si el div general se desborda.
Mi pregunta es: ¿es posible solucionar esto sólo cambiando el CSS?
Saludos de Víctor.-
Valora esta pregunta


0