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

Question

我正在构建一个带有许多限制的灵活进度条。它需要能够在其中包含任意数量的元素，让这些元素都具有相同的宽度，垂直居中，支持不同长度的内容，在 IE9 及更高版本中工作，并且在它们旁边有一个图标，没有任何额外的标记。 display: table-cell 似乎是最合适的解决方案，适用于内部可能无限数量的元素以及很好地垂直对齐文本，并且 :before 会处理图标，这也是与 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 并手动设置它们的宽度，图标会按预期垂直居中，但我想保留 table-cell 更灵活的行为显示，如果可能的话。

如有任何见解，我们将不胜感激。提前致谢!

Answer 1

问题似乎与 IE 如何计算单元格的高度有关。它们的高度似乎是基于内容的高度，而不是元素本身。所以我将相对定位移动到列表本身，因为它的固有高度应该是一致的:

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

然后我使用 50% 的 top 偏移量以稍微不同的方式定位支票，但将 left 偏移量保留为“auto”并使用负边距移动它到位(因为它们比 transform 有更好的向后兼容支持)，但是这个选择取决于你:

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

希望对您有所帮助。

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