Ошибка вертикального выравнивания + вертикального линейного градиента в Internet Explorer 11

Question

Я только что столкнулся с ошибкой в ​​Internet Explorer 11, которая (конечно) не возникает в других браузерах.

У меня есть:

• в стиле кнопки <a>
• с примененным вертикальным линейным градиентом
• и CSS-стилем с вертикальным выравниванием
• в списке <ul> (не требуется, но причина, по которой я установил)вертикальное выравнивание)

... и, как видно из фрагмента ниже, верхний цвет повторяется в нижней части кнопки!

(я добавил красивые цвета влучше визуализировать проблему)

Есть идеи, откуда она взялась и как с этим бороться?Спасибо.

body {
	background: hsl(0,100%,50%);
}
li {
	height:50px;
    margin-bottom: 10px;
}
.btn {
    background: hsl(100, 100%, 50%);
    border: outset 1px grey;
    text-align: center;
    text-decoration: none;
    padding: 15px;
}
.vertgradient {
    background: linear-gradient(to top, hsl(200, 100%, 50%) 0%, hsl(50,100%,70%) 100%);
}
.vertalign {
    vertical-align: middle;
}
.horizgradient {
    background: linear-gradient(to right, hsl(200, 100%, 50%) 0%, hsl(50,100%,70%) 100%);
}

<ul>
  <li>
    <a class="btn vertgradient vertalign">On IE 11, yellow line at the bottom</a>
  </li>
  <li>
    <a class="btn horizgradient vertalign">No problem with a horizontal gradient</a>
  </li>
  <li>
    <a class="btn vertgradient">No problem without "vertical-align"</a>
  </li>
  <li>
    <a class="btn vertalign">No problem without "linear-gradient"</a>
  </li>
</ul>

Answer 1

Проблема заключается в отображении проблемы, связанной с использованием элементов inline в качестве элементов block или inlne-clock, в данном случае a (inline по умолчанию), используемых в качестве элемента inline-clockбез правильного определения.Все остальные браузеры имеют ту же ошибку, но при окончательном рендеринге видимых проблем нет.

Чтобы решить проблему, просто добавьте display: inline-block; к кнопкам (a.btn).

body {
    background: hsl(0,100%,50%);
}
li {
    height:50px;
    margin-bottom: 10px;
}
.btn {
    display: inline-block;
    background: hsl(100, 100%, 50%);
    border: outset 1px grey;
    text-align: center;
    text-decoration: none;
    padding: 15px;
}
.vertgradient {
    background: linear-gradient(to top, hsl(200, 100%, 50%) 0%, hsl(50,100%,70%) 100%);
}
.vertalign {
    vertical-align: middle;
}
.horizgradient {
    background: linear-gradient(to right, hsl(200, 100%, 50%) 0%, hsl(50,100%,70%) 100%);
}

<ul>
  <li>
    <a class="btn vertgradient vertalign">On IE 11, yellow line at the bottom</a>
  </li>
  <li>
    <a class="btn horizgradient vertalign">No problem with a horizontal gradient</a>
  </li>
  <li>
    <a class="btn vertgradient">No problem without "vertical-align"</a>
  </li>
  <li>
    <a class="btn vertalign">No problem without "linear-gradient"</a>
  </li>
</ul>