Css 垂直对齐+；Internet Explorer 11中的垂直线性梯度错误

我刚刚在InternetExplorer11中遇到了一个bug，这（当然）在其他浏览器中不会发生

我有：

• 样式为

• 应用垂直线性渐变
• 和垂直对齐CSS样式
• 在
  列表中（不需要，但我设置垂直对齐的原因）

。。。并且，正如您在下面的代码片段中所看到的，顶部的颜色在按钮的底部重复

（我添加了漂亮的颜色以更好地显示问题）

知道它来自何处以及如何处理吗？
谢谢

正文{
背景：hsl（0100%，50%）；
}
李{
高度：50px；
边缘底部：10px；
}
.btn{
背景：hsl（100,100%，50%）；
边框：1倍灰色；
文本对齐：居中；
文字装饰：无；
填充：15px；
}
.垂直梯度{
背景：线性梯度（到顶部，hsl（200,100%，50%）0%，hsl（50100%，70%）100%）；
}
.vertalign{
垂直对齐：中间对齐；
}
.水平梯度{
背景：线性梯度（向右，hsl（200,100%，50%）0%，hsl（50100%，70%）100%）；
}

在IE 11上，底部的黄线


水平梯度没有问题


没有“垂直对齐”就没有问题


没有“线性梯度”就没有问题

问题在于显示问题，涉及使用

内联

元素，如

块

或

内联时钟

元素，在这种情况下，

a

（

内联

默认）用作

内联时钟

元素，但没有正确的定义。所有其他浏览器都会出现相同的错误，但最终呈现不会出现任何可见问题

要解决这个问题，只需添加

display:inline块到按钮（
a.btn
）


正文{
背景：hsl（0100%，50%）；
}
李{
高度：50px；
边缘底部：10px；
}
.btn{
显示：内联块；
背景：hsl（100,100%，50%）；
边框：1倍灰色；
文本对齐：居中；
文字装饰：无；
填充：15px；
}
.垂直梯度{
背景：线性梯度（到顶部，hsl（200,100%，50%）0%，hsl（50100%，70%）100%）；
}
.vertalign{
垂直对齐：中间对齐；
}
.水平梯度{
背景：线性梯度（向右，hsl（200,100%，50%）0%，hsl（50100%，70%）100%）；
}


在IE 11上，底部的黄线


水平梯度没有问题


没有“垂直对齐”就没有问题


没有“线性梯度”就没有问题

有人能帮我吗？