IE垂直居中错误与table-cell父级和绝对定位的伪元素

Question

我正在构建一个具有许多约束条件的灵活进度条。它需要能够包含任意数量的项目，这些项目的宽度相同，垂直居中，支持不同长度的内容，在IE9及更高版本中工作，并在它们旁边有一个图标，没有任何额外的标记。 display: table-cell似乎是内部可能无限数量的项目以及垂直对齐文本的最合适的解决方案，并且：之前将处理图标，该图标也将与{{3}垂直对齐}}

这似乎在现代浏览器上运行良好，因为这里没什么特别的花哨。但是，在任何版本的Internet Explorer中，这并不像我想的那样顺利。如果项目具有可变高度，则图标不会垂直居中于除最高元素之外的任何内容。 IE9支持translateY，因为我们在显示方面有困难，所以它已经很久了：table / table-cell。即使是IE11也无法实现这一目标。

top: 50%; translateY(-50%) method

这是该方法在Firefox中完美运行的屏幕截图： 在IE11中失败：

我最初认为失败是由于IE中没有正确计算元素的高度，但边界是统一的，这表明情况并非如此。

如果我将列表项设置为display: inline-block并手动设置其宽度，则图标会按预期垂直居中，但我希望保留表格单元格显示更灵活的行为，如果有的话可能的。

任何见解都将不胜感激。提前谢谢！

Answer 1

问题似乎在于IE如何计算细胞的高度。它们的高度似乎是基于内容的高度，而不是元素本身。所以我将相对定位移到了列表本身，因为它的内在高度应该是一致的：

.progress-bar {
  display: table;
  table-layout: fixed;
  width: 100%;
  position: relative;
  counter-reset: progressBar;
}

然后，我使用top偏移50％略微不同地定位支票，但将left偏移量保留为“自动”并使用负边距将其移动到位（因为它们有比transform更好的向后兼容支持，但这个选择取决于你：

&:before {
  content: "✓";
  color: green;
  display: block;
  position: absolute;
  top: 50%;
  margin-top:-.5em;
  margin-left: -1em;
}

我希望这会有所帮助。

这是Codepen分支：http://codepen.io/aarongustafson/pen/PwPxEp