html - IE8 标准模式 - 表格列的奇怪行为 - TD 宽度有问题

Question

问题本身仅在 IE8 标准模式下可见(我在 VMWare Player 上使用 IE8/WinXP VM)，在 IE9+ 和其他浏览器中看起来正常。这是它在 IE8 中的样子:

它应该是这样的:

这是代码(没有背景图片，但它们不会改变任何东西):http://jsfiddle.net/pe6esnuw/6/

<table class="msgTable" cellspacing="0" cellpadding="0">
    <tr>
        <td class="msgTableTL"></td>
        <td class="msgTableT" colspan="2"></td>
        <td class="msgTableTR"></td>
    </tr>
    <tr>
        <td class="msgTableL"></td>
        <td class="msgTableContent" colspan="2">Content goes here blabla</td>
        <td class="msgTableR"></td>
    </tr>
    <tr>
        <td class="msgTableBL"></td>
        <td class="msgTableB"></td>
        <td class="msgTableBT"></td>
        <td class="msgTableBR"></td>
    </tr>
</table>

箭头( fiddle 中的灰色 block )应保持 42px 宽，左侧的 TD 元素应拉伸(stretch)以占据其余空间，但事实并非如此。这怎么能解决？气泡是灵活宽度的，因此硬编码 px 值不是一种选择。

附言为什么我必须在这里发布来自 fiddle 的相同代码？与大多数其他代码一样，如果没有视觉表示，它就毫无用处!

Answer 1

如果您只是在底部中间部分添加一个 div(42 像素宽和 20 像素高)并将其放在 msgTableBT 单元格中(现在 colspan 为 2)会怎样？在这里 fiddle :http://jsfiddle.net/q5wjzwLL/

<tr>
    <td class="msgTableBL"></td>
    <td class="msgTableBT" colspan="2"><div class="bg"></div></td>
    <td class="msgTableBR"></td>
</tr>

您的 CSS 会略有变化:

.msgTable .msgTableBT {
    background: #000000;
    width: auto;
}
.bg
{
    float: right;
    width: 42px;
    height: 20px !important;
    background: #DDDDDD;
}