修复了IE8中定位的伪元素bug

Question

背景

我有一个标准的三列布局，其中第一列向左浮动，第三列向右浮动。第一列需要全高背景。

• 此布局适用于模板，因此三列中的任何一列都可以包含最长的内容。
• 我无法更改标记源顺序，因此无法使用display:table解决方案。
• 我无法添加任何DOM节点。
• 布局以最小和最大宽度为中心，因此我无法将具有内置背景颜色的垂直重复背景图像附加到页面。
• 在IE7中需要看起来不错，但IE8 +需要支持。

解决方案

为了实现全高左列，我在colLeft上创建了一个伪元素。该伪元素具有固定定位设置到视口底部，100％高度，并放置在左列后面。这个解决方案很棒，因为：

• IE8 +支持伪元素。
• 伪元素附加到左列，因此如果模板没有左列，则背景自然不存在。
• 如果不设置left或right属性，固定定位的伪元素将保留在左列（适用于居中布局）。

这是一个example on CodePen。

（确保在IE中查看CodePens时文档模式遵循浏览器模式）。

问题

在IE8中，全高左列背景仅向下延伸到初始视口底部（折叠）。

我created another test使用新的leftColBg节点而不是伪元素。这在IE8中按预期工作，这意味着固定定位应该有效。

以下是我在IE8和生成的内容上找到的最佳解释：Why does a filter gradient on a pseudo element not work in IE8?

我认为IE8错误地定位了生成的内容，因为它不是包含内容的“对象”。任何人都可以更好地解释这个IE8错误吗？有修复吗？