Допомога у програмуванні, відповіді на питання / Html / IE 11, Flexbox і Абсолютне позиціонування не працює - html, css, css3, internet-explorer, flexbox

IE 11, Flexbox, а абсолютне позиціонування не працює - html, css, css3, internet explorer, flexbox

Таким чином Chrome відображає мій HTML у Windows 10:

Ось як Internet Explorer 11 відображає мій HTML у Windows 10:

Зверніть увагу, що в Chrome ви можете бачити всі підменю, але в Internet Explorer 11 ви можете "t. Що я можу зробити, щоб вона працювала в Internet Explorer 11?"

Ось мій код:

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
min-width: 1280px;
}

a {
color: #000;
text-decoration: none;
}

a.active {
color: #f00;
}

ul {
margin: 0;
padding: 0;
}

ul li {
display: inline-block;
}

.menu > li {
position: relative;
font-size: 18px;
}

.menu > li + li {
margin-left: 100px;
}

.submenu {
position: absolute;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

.submenu-4,
.submenu-5 {
right: 0;
}

.submenu li {
font-size: 14px;
white-space: nowrap;
}

.submenu > li + li {
margin-left: 25px;
}

a:not(.active) + ul {
display: none;
}

<nav>
<ul class="menu">
<li>
<a href="#">Top Level Link 1</a>
<ul class="submenu submenu-1">
<li><a href="#">Submenu 1 Link 1</a></li>
<li><a href="#">Submenu 1 Link 2</a></li>
<li><a href="#">Submenu 1 Link 3</a></li>
<li><a href="#">Submenu 1 Link 4</a></li>
<li><a href="#">Submenu 1 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 2</a>
<ul class="submenu submenu-2">
<li><a href="#">Submenu 2 Link 1</a></li>
<li><a href="#">Submenu 2 Link 2</a></li>
<li><a href="#">Submenu 2 Link 3</a></li>
<li><a href="#">Submenu 2 Link 4</a></li>
<li><a href="#">Submenu 2 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 3</a>
<ul class="submenu submenu-3">
<li><a href="#">Submenu 3 Link 1</a></li>
<li><a href="#">Submenu 3 Link 2</a></li>
<li><a href="#">Submenu 3 Link 3</a></li>
<li><a href="#">Submenu 3 Link 4</a></li>
<li><a href="#">Submenu 3 Link 5</a></li>
</ul>
</li>
<li>
<a href="#" class="active">Top Level Link 4</a>
<ul class="submenu submenu-4">
<li><a href="#">Submenu 4 Link 1</a></li>
<li><a href="#">Submenu 4 Link 2</a></li>
<li><a href="#">Submenu 4 Link 3</a></li>
<li><a href="#">Submenu 4 Link 4</a></li>
<li><a href="#">Submenu 4 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 5</a>
<ul class="submenu submenu-5">
<li><a href="#">Submenu 5 Link 1</a></li>
<li><a href="#">Submenu 5 Link 2</a></li>
<li><a href="#">Submenu 5 Link 3</a></li>
<li><a href="#">Submenu 5 Link 4</a></li>
<li><a href="#">Submenu 5 Link 5</a></li>
</ul>
</li>
</ul>
</nav>

Відповіді:

2 для відповіді № 1

Проблема полягає в тому, що IE11 не розпізнає right: 0 зсув, застосований до абсолютно розташованого гнучкого контейнера (.submenu)

Враховуючи, що макет працює в Chrome і Firefox, проблема, ймовірно, є помилкою в IE11, яка не була б несподіванкою.

На популярному веб-сайті сумісності браузера caniuse.comIE11 мав повний зелений знак для flexbox. Це означає, що IE11 надає повну підтримку. Нещодавно, однак, IE11 було знижено до блідо-зеленого, тобто часткової підтримки, через велику кількість помилок.

Ось просте рішення:

.submenu {
position: absolute;
display: flex;
flex-direction: row-reverse;  /* <-- ADD THIS */
}

The flex-direction властивість визначає напрямок, у якому викладені гнучкі елементи. Значенням за замовчуванням є flex-direction: row. З row-reverse (і column-reverse) the main-start і основний напрямки міняються місцями.

Це виправляє проблему в IE11, не порушуючи нічого в інших браузерах.

Тим не менш, це робить зворотний порядок посилань у всіх браузерах.

Щоб вирішити цю проблему, ви можете змінити порядок посилань у джерелі або скористатися гнучко order власність змінити порядок лише на екрані:

.submenu-4 > li:nth-child(1) { order: 5 ; }
.submenu-4 > li:nth-child(2) { order: 4 ; }
.submenu-4 > li:nth-child(3) { order: 3 ; }
.submenu-4 > li:nth-child(4) { order: 2 ; }
.submenu-4 > li:nth-child(5) { order: 1 ; }

Повний код (перевірено в Firefox, Chrome і IE11):

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
min-width: 1280px;
}

a {
color: #000;
text-decoration: none;
}

a.active {
color: #f00;
}

ul {
margin: 0;
padding: 0;
}

ul li {
display: inline-block;
}

.menu > li {
position: relative;
font-size: 18px;
}

.menu > li + li {
margin-left: 100px;
}

.submenu {
position: absolute;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: row-reverse;                   /* NEW */
}

.submenu-4,
.submenu-5 {
right: 0;
}

.submenu li {
font-size: 14px;
white-space: nowrap;
}

.submenu > li + li {
margin-left: 25px;
}

a:not(.active) + ul {
display: none;
}

.submenu-4 > li:nth-child(1) { order: 5 ; }        /* NEW */
.submenu-4 > li:nth-child(2) { order: 4 ; }        /* NEW */
.submenu-4 > li:nth-child(3) { order: 3 ; }        /* NEW */
.submenu-4 > li:nth-child(4) { order: 2 ; }        /* NEW */
.submenu-4 > li:nth-child(5) { order: 1 ; }        /* NEW */

<nav>
<ul class="menu">
<li>
<a href="#">Top Level Link 1</a>
<ul class="submenu submenu-1">
<li><a href="#">Submenu 1 Link 1</a></li>
<li><a href="#">Submenu 1 Link 2</a></li>
<li><a href="#">Submenu 1 Link 3</a></li>
<li><a href="#">Submenu 1 Link 4</a></li>
<li><a href="#">Submenu 1 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 2</a>
<ul class="submenu submenu-2">
<li><a href="#">Submenu 2 Link 1</a></li>
<li><a href="#">Submenu 2 Link 2</a></li>
<li><a href="#">Submenu 2 Link 3</a></li>
<li><a href="#">Submenu 2 Link 4</a></li>
<li><a href="#">Submenu 2 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 3</a>
<ul class="submenu submenu-3">
<li><a href="#">Submenu 3 Link 1</a></li>
<li><a href="#">Submenu 3 Link 2</a></li>
<li><a href="#">Submenu 3 Link 3</a></li>
<li><a href="#">Submenu 3 Link 4</a></li>
<li><a href="#">Submenu 3 Link 5</a></li>
</ul>
</li>
<li>
<a href="#" class="active">Top Level Link 4</a>
<ul class="submenu submenu-4">
<li><a href="#">Submenu 4 Link 1</a></li>
<li><a href="#">Submenu 4 Link 2</a></li>
<li><a href="#">Submenu 4 Link 3</a></li>
<li><a href="#">Submenu 4 Link 4</a></li>
<li><a href="#">Submenu 4 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 5</a>
<ul class="submenu submenu-5">
<li><a href="#">Submenu 5 Link 1</a></li>
<li><a href="#">Submenu 5 Link 2</a></li>
<li><a href="#">Submenu 5 Link 3</a></li>
<li><a href="#">Submenu 5 Link 4</a></li>
<li><a href="#">Submenu 5 Link 5</a></li>
</ul>
</li>
</ul>
</nav>

jsFiddle

1 для відповіді № 2

Хоча я дуже сильно виступаю за прийняттяFlexbox, і я роблю у всіх своїх останніх проектах, він, здається, не відіграє важливу роль у вашому коді. Маючи це на увазі, ви повинні знати, що існує легше і більш ремонтоване вирішення цієї проблеми, якщо ви вилучите display: flex і його варіанти з CSS і додати white-space: nowrap до .submenu.

Таким чином, вам не доведеться мати справу з зміною елементів підменю, що може бути проблемою, якщо зміниться кількість елементів.

Одного разу, коли IE11 більше не турбує, ви можете повернутися до початкового коду.

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
min-width: 1280px;
}

a {
color: #000;
text-decoration: none;
}

a.active {
color: #f00;
}

ul {
margin: 0;
padding: 0;
}

ul li {
display: inline-block;
}

.menu > li {
position: relative;
font-size: 18px;
}

.menu > li + li {
margin-left: 100px;
}

.submenu {
position: absolute;
/* removed flexbox */
white-space: nowrap; /* new */
}

.submenu-4,
.submenu-5 {
right: 0;
}

.submenu li {
font-size: 14px;
white-space: nowrap;
}

.submenu > li + li {
margin-left: 25px;
}

a:not(.active) + ul {
display: none;
}

<nav>
<ul class="menu">
<li>
<a href="#">Top Level Link 1</a>
<ul class="submenu submenu-1">
<li><a href="#">Submenu 1 Link 1</a></li>
<li><a href="#">Submenu 1 Link 2</a></li>
<li><a href="#">Submenu 1 Link 3</a></li>
<li><a href="#">Submenu 1 Link 4</a></li>
<li><a href="#">Submenu 1 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 2</a>
<ul class="submenu submenu-2">
<li><a href="#">Submenu 2 Link 1</a></li>
<li><a href="#">Submenu 2 Link 2</a></li>
<li><a href="#">Submenu 2 Link 3</a></li>
<li><a href="#">Submenu 2 Link 4</a></li>
<li><a href="#">Submenu 2 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 3</a>
<ul class="submenu submenu-3">
<li><a href="#">Submenu 3 Link 1</a></li>
<li><a href="#">Submenu 3 Link 2</a></li>
<li><a href="#">Submenu 3 Link 3</a></li>
<li><a href="#">Submenu 3 Link 4</a></li>
<li><a href="#">Submenu 3 Link 5</a></li>
</ul>
</li>
<li>
<a href="#" class="active">Top Level Link 4</a>
<ul class="submenu submenu-4">
<li><a href="#">Submenu 4 Link 1</a></li>
<li><a href="#">Submenu 4 Link 2</a></li>
<li><a href="#">Submenu 4 Link 3</a></li>
<li><a href="#">Submenu 4 Link 4</a></li>
<li><a href="#">Submenu 4 Link 5</a></li>
</ul>
</li>
<li>
<a href="#">Top Level Link 5</a>
<ul class="submenu submenu-5">
<li><a href="#">Submenu 5 Link 1</a></li>
<li><a href="#">Submenu 5 Link 2</a></li>
<li><a href="#">Submenu 5 Link 3</a></li>
<li><a href="#">Submenu 5 Link 4</a></li>
<li><a href="#">Submenu 5 Link 5</a></li>
</ul>
</li>
</ul>
</nav>

https://jsfiddle.net/rddo2gr4/