IE垂直居中错误与table-cell父级和绝对定位的伪元素 [英] IE vertical centering bug with table-cell parent and absolutely positioned pseudo-element

问题描述

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

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

我在CodePen上创建了一个简化的测试用例，以便您可以看到它的实际效果：

以下是该方法在Firefox中完美运行的截图：

在IE11中失败：

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

如果我将列表项设置为 display：inline-block 并手动设置它们的宽度，图标垂直居中，如果可能的话，我想保留表单元格显示的更灵活的行为，如果可能的话。 / p>

任何见解都将不胜感激。在此先感谢！

解决方案

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

  .progress-bar {
显示：表; 
 table-layout：fixed; 
宽度：100％; 
头寸：相对; 
 counter-reset：progressBar; 
} 
  

然后我使用您的<$ c $以稍微不同的方式定位支票c> top 偏移量为50％，但将左偏移量保留为auto并使用负边距将其移动到位（因为它们有比转换更好的向后兼容支持，但这个选择取决于你：

 &：{
 content：✓之前; 
颜色：绿色; 
 display：block; 
仓位：绝对; 
 top：50％; 
 margin-top： - 。5em; 
 margin-left：-1em; 
} 
  

我希望这会有所帮助。

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

I'm building a flexible progress-bar with a number of constraints. It needs to be able to contain any number of items within it, have these items all be the same width, vertically centered, support content of varying lengths, work in IE9 and above and have an icon next to them without any additional markup. display: table-cell seemed to be the most appropriate solution for the potentially unlimited number of items inside as well as vertically aligning the text nicely, and :before would take care of the icon, which would also be vertically aligned with the top: 50%; translateY(-50%) method.

This seemingly works fine on modern browsers, as there's nothing particularly fancy here. However, in any version of Internet Explorer, this isn't going as smoothly as I'd like. If the items are of a variable height, the icons aren't vertically centered on anything but the tallest element. IE9 has support for translateY and it's been ages since we had difficulties with display: table/table-cell. Even IE11 can't make this work.

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

Here's a screenshot of the method working perfectly in Firefox: And failing in IE11:

I initially thought the failure was due to the height of the elements not being calculated correctly in IE, but the borders being uniform indicates that this isn't the case.

If I set the list items to display: inline-block and manually set their widths, the icon vertically centers as expected, but I'd like to retain the more flexible behavior of table-cell display, if at all possible.

Any insights would be greatly appreciated. Thanks in advance!

解决方案

The issue seems to be with how IE is calculating the heights of the cells. Their heights seem to be based on the height of the contents, not the element itself. So I moved the relative positioning to the list itself as its intrinsic height should be consistent:

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

Then I positioned the check in a slightly different manner using your top offset of 50%, but leaving the left offset to "auto" and using negative margins to move it into place (since they have better backward-compatible support than transform), but that choice is up to you:

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

I hope this helps.

Here’s the Codepen fork: http://codepen.io/aarongustafson/pen/PwPxEp

这篇关于IE垂直居中错误与table-cell父级和绝对定位的伪元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！