Internet Explorer 11中vertical-align与垂直linear-gradient兼容问题

问题复现 #

你遇到的是IE11渲染引擎的一个专属Bug：当<ul>列表里的按钮样式<a>标签同时使用垂直线性渐变（linear-gradient(to top)）和vertical-align: middle时，按钮底部会重复显示渐变的顶部颜色（你用鲜明色彩的设置确实让这个问题很容易观察）。以下是可复现的代码：

CSS代码

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%); }

HTML代码

<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>

成因分析 #

这个Bug的核心是IE11对inline元素的vertical-align属性和背景渐变的渲染逻辑冲突：

• <a>标签默认是inline元素，当设置vertical-align: middle后，IE11的布局引擎会错误地扩展元素的背景绘制范围，把行框（line-box）的额外空间也纳入渐变绘制区域；
• 垂直渐变的方向是从下到上，顶部的黄色（hsl(50,100%,70%)）会被错误地重复绘制在元素底部，而水平渐变因为方向与行框扩展方向垂直，不会触发这个错误；
• 去掉vertical-align或渐变其中一个后渲染恢复正常，也验证了两者的冲突是问题根源。

解决方案 #

这里有几个经过验证的可行方案，你可以根据布局需求选择：

方案1：将按钮改为块级/行内块级元素

给.btn添加display: inline-block（或block），让IE11正确识别元素的实际边界，避免行框带来的渲染偏差：

.btn {
  /* 原有样式保留 */
  display: inline-block;
}

方案2：用Flex布局替代vertical-align

如果需要保持元素的行内特性，可以给父元素<li>设置Flex布局实现垂直居中，移除<a>标签的vertical-align：

li {
  height:50px;
  margin-bottom: 10px;
  display: flex;
  align-items: center; /* 实现垂直居中 */
}
/* 移除vertalign类的vertical-align属性 */
.vertalign {
  vertical-align: initial;
}

方案3：添加overflow: hidden裁剪多余渲染

通过强制裁剪元素边界外的内容，让IE11无法显示重复的顶部颜色：

.btn {
  /* 原有样式保留 */
  overflow: hidden;
}

内容的提问来源于stack exchange，提问作者LePatay