CSS - «позиция: исправлена», действующая как «абсолютная» в Firefox
Я строил веб-сайт в Safari, и я только что протестировал его в Firefox, и мои фиксированные навигационные элементы ведут себя так, как будто их позиция абсолютна.
#navigation {
display: block;
width: 100%;
height: 50px;
position: fixed;
left: 0px;
bottom: 0px;
text-align: center;
z-index: 99000;
}
Это CSS, который у меня есть для основной оболочки навигации (это навигация снизу). В Webkit он работает отлично: то есть он прилипает к нижней части окна независимо. В Firefox он позиционирует себя в конце тегов, поэтому, например, на длинной странице мне нужно прокрутить вниз, чтобы увидеть его. Он действует так, как будто он абсолютный.
У меня также есть боковая панель навигации.
.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;
}
Эта боковая панель также действует так, как если бы она была абсолютной, то есть она правильно позиционировалась за пределами экрана, но удлинялась<body> и, таким образом, появляется горизонтальная полоса прокрутки.height: 100%; также отвечает на<body> высота, а не высота окна, так что, например, мой<header> имеет верхнее поле 20px, и ползунок тоже наблюдает за этим полем (тело имеет 0 полей). Аналогично, вместоheight: 100%; заканчивается в нижней части окна, заканчивается в нижней части<body>с учетом нижнего поля нижнего колонтитула.
Я не могу понять на всю жизнь, почему это происходит. Проверка элементов показывает, что все свойства загружаются нормально, и в Chrome и Safari это работает. Первоначально это работало, и это работало в последний раз, когда я даже редактировал любую навигацию, но с тех пор перестало работать, так как я создавал другие, не относящиеся к делу части сайта.
http://www.upprise.com/demo.php - щелкните значок конверта, чтобы увидеть боковую панель