Html 镀铬和IE中的表单元尺寸

我有一个
JSFIDLE中提到了所需的详细信息。
这在Firefox上运行良好，但在Chrome和IE上却不行！ 他们怎么了？为什么它们会展开最后一行中具有固定高度的单元格，而不是第二行中第一列中唯一没有确定高度的单元格。
以下是HTML代码：

<table style="width: 100%;" dir="rtl" cellpadding="0" cellspacing="0">
<tr>
    <td style="height: 100px; width: 176px; background:blue">
        this is a fixed size cell
    </td>
    <td rowspan="3" style="background:gray; height: 360px;">this cell is spanned 3 rows<br /> lots of content may be placed here</td>
</tr>
<tr>
    <td style="background:red">this should expand depending on gray region</td>
</tr>

<tr>    
    <td style="height: 46px; background:blue">this is a fixed size cell</td>
</tr>

这是一个固定大小的单元格
此单元格跨越3行
此处可放置大量内容
这将根据灰色区域进行扩展
这是一个固定大小的单元格

---

您案例的高度算法似乎未找到。您希望

td{height:auto}

扩展所有可用空间，但是

“表行”的“高度”值“自动”表示使用的行高度 因为布局是最小值。最小值取决于单元格框高度和单元格框 对齐…在CSS 2.1中，单元格框的高度是内容所需的最小高度

最后

CSS 2.1没有指定跨多行的单元格如何影响 行高计算，但行高总和 所涉及的内容必须足够大，以包含跨行的单元格

---

请参见

谢谢您的解释。但我能为我的处境做些什么呢？我想以跨浏览器的方式实现这样的布局，不管怎样。列的宽度（包括左、右或其中一个）是固定的吗？或者可以设置为百分比？是的，宽度是固定的，但正如我所提到的，灰色单元格的高度是可变的，而红色单元格的高度应该根据灰色单元格的高度而变化。您可以去掉表格并使用位置：对于右列和顶部和底部的单元格，绝对值。看小提琴上的演示，你们可以定位绝对中心单元，只需选择正确的顶部和底部边缘