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

【问题标题】：Vertical-align + Vertical Linear-gradient bug in Internet Explorer 11Internet Explorer 11 中的垂直对齐 + 垂直线性渐变错误
【发布时间】：2018-10-27 10:16:09
【问题描述】：

我刚刚在 Internet Explorer 11 中遇到了一个错误，（当然）不会在其他浏览器中出现。

我有：

按钮样式的<a>
应用了垂直线性渐变
和垂直对齐的 CSS 样式
在<ul> 列表中（不需要，但我设置垂直对齐的原因）

...并且，正如您在下面的 sn-p 中所见，顶部颜色在按钮底部重复！

（我添加了漂亮的颜色以更好地可视化问题）

知道它的来源以及如何处理吗？
谢谢。

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>

【问题讨论】：

谁能帮我解决这个问题？

标签： css internet-explorer internet-explorer-11 vertical-alignment linear-gradients

【解决方案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>

【讨论】：