Исправлено неправильное поведение позиции в IE11

Я испытываю неправильное расположение элементов на моей странице только в IE (11); живая ссылка здесь. Текст логотипа, меню и текст левой боковой панели остаются на месте и не перемещаются вместе с wrapper, когда левый ползунок открыт (нажатие кнопки «Информация+»). Я читал о position: fixed + transition проблемах с IE.

Я пытался применить position: expression(fixed); к header, но что-то пошло не так, и wrapper получает тормозное движение при открытии/закрытии ползунка. (Боковая панель не работала с position: expression(fixed);)

Также я пытался настроить css, изменяя значения позиции элемента в static/ absolute, но безуспешно. Тесты выполняются в полноэкранном режиме, тема не для мобильных экранов. Есть мысли?

Л.Э.: Я нашел возможное решение, которое работает со слайдером в IE11:

.header {
  position: absolute;
}

.bar-side {
  position: absolute;
}

Будет работать с ползунком, но также будет перемещаться по вертикальной прокрутке. Если я смогу это как-то исправить, это может быть решением.


css css-transitions internet-explorer css-position internet-explorer-11
person typo_    schedule 19.06.2015    source источник
comment
Проверяли ли вы свою HTML-разметку на соответствие стандартам? IE ненавидит недопустимый HTML.   -  person Sparky    schedule 19.06.2015
comment
если вы обратитесь к процедуре проверки разметки, похоже, что есть несколько ошибок, но они не связаны с описанной выше проблемой. вот результат.   -  person typo_    schedule 19.06.2015
comment
спасибо, май б; к сожалению, для меня это довольно сложно сказать, потому что я не очень хорошо разбираюсь в программировании, я просто пытаюсь понять, как все работает...   -  person typo_    schedule 19.06.2015

Ответы (4)


arrow_upward
3
arrow_downward

Для быстрого решения добавьте преобразование отдельно для IE, в IE только css hack.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .header, #bar-left{
      left: 0;
      transition: all .5s;
  }
  .shiftnav-open .header, .shiftnav-open #bar-left{
     left:590px;
  }
}
person Felix A J    schedule 21.06.2015
comment
Вот и все !!!! заголовок исправлен в IE :) A++++ большое спасибо. Есть ли возможность исправить боковую панель? - person typo_; 21.06.2015
comment
Боковая панель является частью wrapper, она должна переводиться с помощью wrapper, как header в IE (если вы откроете/закроете ползунок в Chrome, Firefox работает :) - person typo_; 21.06.2015
comment
код есть, но не работает... не могли бы вы проверить и в IE? - person typo_; 21.06.2015
comment
У меня действительно нет слов, чтобы поблагодарить вас. Это правильный ответ, чтобы исправить неправильное поведение position: fixed в IE11, спасибо, спасибо, спасибо! Я очень ценю это ! - person typo_; 21.06.2015
comment
Я действительно не хочу быть грубым, но у вас есть идеи, как я могу решить ту же проблему с помощью полноэкранного слайдера? Я открыл здесь новый вопрос: stackoverflow.com/questions/30964355 /transition-ie11-css-хак - person typo_; 21.06.2015

arrow_upward
10
arrow_downward

Это может быть слишком поздно, но у меня была аналогичная проблема с position:fixed и IE11 для полной страницы DIV (путем указания top: 0; bottom: 0; left: 0; right: 0;). Работал нормально в Chrome, Edge, Firefox и Opera, но IE11 отображал DIV намного меньше полного размера области просмотра и с закругленными углами, которые, похоже, каким-то образом унаследованы от родителя.

Играя с инструментами разработчика IE11, я нашел альтернативный вариант, предложенный в качестве параметра для позиции — «-ms-page». Использование position: -ms-page устранило проблему; предшествовавший этому с помощью position: fixed позволил другим браузерам продолжать работу независимо.

Надеюсь, это поможет другим с похожей проблемой...

person Richard Peers    schedule 20.02.2017

arrow_upward
1
arrow_downward

Переместите header за пределы .shiftnav-wrap и поместите его над ним, а translateX примените отдельно для движения заголовка.

.shiftnav-open header{
      transform: translateX(590px);
}

Не рекомендуется зависеть от его движения относительно внешнего div.

элементы с фиксированным позиционированием фиксируются относительно области просмотра/окна браузера, а не содержащего их элемента — http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning

Другое решение: вы можете использовать заголовок как absolute, внутри левого div #shiftnav-info.

person Felix A J    schedule 20.06.2015
comment
Спасибо, попробовал реализовать первый метод. С header внутри .shiftnav-wrap будет работать, но без анимации только начальная и конечная позиции (не очень хорошо). С header вне .shiftnav-wrap вообще не работает. Я также попробовал второй метод, поместив header (как : absolute) внутри div #shiftnav-info с помощью консоли IE, тот же результат, к сожалению, не сработал. Вы тестировали эти предложения на консоли IE? Как насчет боковой панели? - person typo_; 20.06.2015
comment
Для быстрого решения вы можете добавить хак CSS только для IE и применить преобразование отдельно для IE. - person Felix A J; 21.06.2015
comment
Это будет хорошо, но как? :) Если я добавлю -ms-transform: translateX( ... px ) к фиксированному элементу, в IE всегда будет переводиться в эту определенную позицию. Не могли бы вы сформулировать наглядный пример после того, как у вас есть тест в консоли IE? Спасибо, - person typo_; 21.06.2015
comment
также добавлен переход? - person Felix A J; 21.06.2015
comment
К сожалению, я не так хорош в кодировании, поэтому я прошу четких ответов. не могли бы вы быть так любезны и, пожалуйста, переформулируйте свой основной ответ также с применением перехода, чтобы проверить и подтвердить ваше решение? :) Я имею в виду шапку и левый сайдбар. - person typo_; 21.06.2015

arrow_upward

arrow_downward

person    schedule
comment
Не могли бы вы помочь оператору узнать и объяснить немного больше, почему это работает. - person harmonica141; 22.07.2019