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>

Internet Explorer 11 中的垂直对齐 + 垂直线性渐变错误

Vertical-align + Vertical Linear-gradient bug in Internet Explorer 11

css

internet-explorer

vertical-alignment

linear-gradients

internet-explorer-11