CSS - "posición: fija" que actúa como "absoluta" en Firefox
He estado construyendo un sitio web en Safari, y acabo de probarlo en Firefox y mis elementos de navegación fijos se están comportando como si su posición fuera absoluta.
#navigation {
display: block;
width: 100%;
height: 50px;
position: fixed;
left: 0px;
bottom: 0px;
text-align: center;
z-index: 99000;
}
Este es el CSS que tengo para el envoltorio de navegación principal (es un navegador inferior). En Webkit, funciona perfectamente: es decir, se adhiere a la parte inferior de la ventana independientemente. En Firefox, se coloca al final de las etiquetas, por lo que, por ejemplo, en una página larga, tengo que desplazarme hacia abajo para verlo. Está actuando como si fuera absoluto.
También tengo una barra lateral de navegación.
.slidebar {
display: block;
position: fixed;
left: -1px;
top: -1px;
width: 1px;
height: 100%;
overflow: hidden;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
-ms-transition: all 300ms ease;
transition: all 300ms ease;
z-index: 99998;
}
Esta barra lateral también actúa como si fuera absoluta, es decir, se posiciona correctamente fuera de la pantalla, pero se alarga.<body> y así aparece la barra de desplazamiento horizontal. losheight: 100%; También está respondiendo a la<body> altura y no la altura de la ventana, así que, por ejemplo, mi<header> tiene un margen superior de 20 px y la barra deslizante también observa ese margen (el cuerpo tiene un margen de 0). Del mismo modo, en lugar de laheight: 100%; Terminando en la parte inferior de la ventana, termina en la parte inferior de la ventana.<body>, teniendo en cuenta el margen inferior del pie de página.
No puedo entender por mi vida por qué está sucediendo esto. La inspección de elementos muestra que todas las propiedades se están cargando bien, y en Chrome y Safari funciona. Inicialmente funcionó, y funcionó la última vez que incluso edité cualquiera de las dos navegaciones, pero desde entonces dejó de funcionar desde que construí otras partes irrelevantes del sitio.
http://www.upprise.com/demo.php - Haga clic en el ícono del sobre para ver la barra lateral.