IE表格单元父级和绝对定位伪元素的垂直居中错误

Question

我正在构建一个灵活的进度条，并带有许多约束条件。它需要能够包含任何数量的项目，这些项目都是相同的宽度，垂直居中，支持不同长度的内容，在IE9和更高版本中工作，并在旁边有一个图标，没有任何额外的标记。 display: table-cell似乎是内部可能无限数量的项目的最合适的解决方案，以及很好地垂直对齐文本，和：之前将照顾的图标，这也将与top: 50%; translateY(-50%) method垂直对齐。

这看起来在现代浏览器上工作得很好，因为这里没有什么特别的感觉。但是，在任何版本的Internet Explorer中，这并不像我想的那样顺利。如果物品的高度可变，则图标不是垂直居中，而是最高的元素。 IE9支持translateY，因为我们在显示方面遇到了困难，所以它已经过时了：table/table-cell。即使IE11也无法做到这一点。

I have created a reduced test case on CodePen so you can see it in action:

这里的方法在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