为什么IE不显示此请求的背景图像？

Question

这是IE和其他浏览器之间奇怪的渲染差异。

Internet Explorer 8

Firefox 3.5

Chrome 5

看到区别？在IE8中，该垂直线突然停止。那是因为IE8拒绝显示某个背景图像。这是CSS代码的相关片段：

td#leftbar {
    background: url(img/leftbar.gif) repeat-y right top;
    width: 100px;
}

您可以在此处查看自己计算机上的网站获取更多信息：http://labs.pieterdedecker.be/vspwpg/

Answer 1

问题不在于leftbar：leftbartop表格单元格一直向下延伸到底部。这是因为leftbartop与内容位于同一表格行中。

事实上，我认为IE是唯一正确执行此操作的浏览器：tr中的所有元素都被强制到相同的高度。 IE忽略了列'{{1}由于某种原因，属性。为什么，我不知道。

在解决方案方面首先想到的是 - 除非有人想出这个行为的解释 - 在左侧有一个单独的表，第一个（rowspan）和第三个行（leftbartop）具有固定的高度。

哦，使用表格进行布局不再是社会可接受的。就像旁注:)

Answer 2

关于避免布局的表格，我将第二次Pekka's comment，但由于提出严重的结构更改会有点极端，以下CSS似乎能够很好地解决问题：

TABLE#body {
  background:url(img/leftbar.gif) repeat-y 94px top;
  border-collapse:collapse;
  width:100%;
}

TD#leftbar {
  width:100px;
}

TD#leftbarbottom {
  background:#FFFFFF url(img/leftbarbottom.gif) no-repeat right top;
  height:100px;
}

至于为什么IE和Firefox / Chrome之间存在差异，我现在能找到的唯一可能相关的信息是CSS 2.1 section on table height，其中指出：

  

CSS 2.1没有指定单元格如何   跨越多行会影响行   高度计算除了   所涉及的行高的总和必须   足够包围细胞   跨越行。

因此，不仅IE的行为很奇怪，似乎并没有明确解释应该发生的事情。在IE的情况下，多行单元格所需的空间似乎使用与每个包含的行的最小高度相关的某种相对百分比来划分。

为了说明这一点，您可以使#leftbar使用以下规则占用现在留空的所有空间：

TD#leftbartop {
  height:1px;
}

TD#leftbar {
  height:150px;
}

另一个有趣的例子是1 / 3,2 / 3分裂：

TD#leftbartop {
  height:33px;
}

TD#leftbar {
  height:66px;
}

请注意，如果您将height设置为不合理的小（如前面示例中的1px），则会计算该单元格的高度，该高度不是基于相对百分比，而是其他内容。我不确定它现在从哪里来，但我会玩这些数字，看看我以后是否可以猜测它。