CSS - "position: fixed" действует как "absolute" в 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 - щелкните значок конверта, чтобы увидеть боковую панель

677   7  

7 ответов:

В процессе устранения я смог определить, что наличие следующего в моем теле вызывало все проблемы с фиксированными дивами в Firefox: 

-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

Я изначально добавил этот код, чтобы предотвратить мерцание в некоторых CSS-переходах по всему сайту, но теперь мне придется добавить его в каждый отдельный класс.

20  
2014-01-30 00:48:25

У меня была точно такая же проблема, оказывается, следующее свойство CSS родительского элемента вызывало проблему.

transform: translate3d(0px, 0px, 0px);
17  
2014-09-12 16:32:58

Похоже, что некоторые браузеры будут применять фиксированное позиционирование относительно окна, в то время как Firefox применяет его относительно <body />. Вам нужно сделать свой body 100% высокий: 

body {
    height: 100%;
}

Но маржа от вашей .заголовок сворачивается за пределами элемента body. Измените это: 

margin: 25px auto;

К этому: 

margin: 0 auto; /* updated - thanks JoshC */
padding: 25px auto;
3  
2014-01-29 21:52:39

Проблема, похоже, в вашем теле, я добавил ширину: 100%; высоту: 100%; и переполнение: скрыто; к нему в моем огненном Лисе, и он выглядел просто прекрасно, за исключением нижней строки меню, которая шла на половину его высоты над нижней.

2  
2014-01-29 21:47:26

Я решил эту проблему, переместив элемент, который использует position: fixed;, из его исходного родительского элемента, который использует transform: translateX(-50%);.

Таким образом...

<div class="transformed-container">
   <div="fixed-element"></div>
</div>

...стал...

<div class="transformed-container"></div>

<div class="fixed-element"></div>

Две вещи привели меня к такому выводу:

  1. ответ@Pankaj показывает, что значение translate может вызвать проблему.
  2. комментарий@Wildhoney к другому ответу ссылается на объяснение основной причины: http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
2  
2017-07-17 21:30:16

Не уверен Почему браузеры отображались по-разному, хотя решение довольно простое. Вам нужно дать родительские элементы (html/body) высота 100%, чтобы заполнить всю страницу. Похоже, что FF визуализировал фиксированные элементы в нижней части содержимого, а не в нижней части окна. Добавление следующего заставит его работать в разных браузерах: 

html, body {
    height: 100%;
}

Кроме того, вы также должны использовать заполнение на элементе .header в отличие от поля. Это решит проблему. другой вопрос.

.header {
    margin: 0 auto;    /* use a value of 0 rather than 25px */
    padding: 25px 0;
}

Я протестировал все это в браузере, теперь он будет работать в FF. Он также должен правильно отображаться в Chrome и других устройствах.

1  
2014-01-29 21:47:04

Мне нужно было удалить некоторые классы css из верхнего контейнера элемента fixed-on-scroll, который имел переход, из библиотеки animateCSS.

$(window).on('scroll', function () {
     if (distance <= 65) {
        $('#my-contaniner').removeClass('animated fadeInLeft'); //delete problematic classes for FF
Add your code
 });

Может быть, это поможет

1  
2016-10-25 15:12:26

Comments

    Ничего не найдено.
Click here to cancel reply.