Коригирано неправилно поведение на позицията в IE11

Изпитвам неправилно позициониране на елементи в моята страница, само в IE(11); връзка на живо тук. Логотекстът, менюто и текстът в лявата странична лента остават на място, не се движат с wrapper, когато левият плъзгач е отворен (щракване върху бутона информация+). Чел съм за position: fixed + transition в проблеми с IE.

Опитах се да приложа position: expression(fixed); към header, но нещо се обърка и wrapper получава спирачно движение при отваряне/затваряне на плъзгача. (Страничната лента не работи с position: expression(fixed);)

Също така се опитах да променя css, променяйки стойностите на позицията на елемента в static/ absolute, но без успех. Тестовете се правят на цял екран, темата не е за мобилни екрани. Някакви мисли?

LE: Намерих възможно решение, което работи с плъзгача в 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
благодаря ви, май b; за съжаление, за мен е доста трудно да се каже, защото не съм толкова добър в кодирането, просто се опитвам да разбера как работят нещата ...   -  person typo_    schedule 19.06.2015

Отговори (4)


arrow_upward
3
arrow_downward

За бързо решение добавете трансформация отделно за IE, в IE само css хак.

@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-hack - 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