2

背景

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

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

解决方案

为了实现全高左列，我在colLeft. 该伪元素已将固定定位设置为视口底部、100% 高度，并放置在左列的后面。这个解决方案很棒，因为：

  • IE8+ 支持伪元素。
  • 伪元素附加到左列，所以如果模板没有左列，背景自然不存在。
  • 通过不设置leftorright属性，固定位置的伪元素保留在左列（有利于居中布局）。

这是CodePen 上的一个示例。

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

问题

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

我用新节点而不是伪元素创建了另一个测试。leftColBg这在 IE8 中按预期工作，这意味着固定定位应该可以工作。

这是我可以在 IE8 和生成的内容上找到的最佳解释：为什么伪元素上的过滤渐变在 IE8 中不起作用？

我认为 IE8 错误地定位了生成的内容，因为它不是包含内容的“对象”。谁能更好地解释这个 IE8 错误？有解决办法吗？

4

0 回答 0