IE8标准模式 - 表列的奇怪行为 - 毛刺TD宽度

Question

问题本身仅在IE8标准模式下可见（我在VMWare播放器上使用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>

箭头（小提琴中的灰色块）应该保持42px宽，左边的TD元素应该伸展以占据剩余的空间，但这不会发生。怎么能修好？气泡是灵活宽度的，因此硬编码px值不是一种选择。

P.S。为什么我必须在这里发布相同的代码？没有可视化表示，它就像大多数其他代码一样无用！

Answer 1

如果你只是在底部中间部分（42px宽和20px高）添加一个div并将其放在msgTableBT单元格中（现在colspan为2）怎么办？在这里摆弄：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;
}