Html 表格单元格不必要地溢出FF和IE中的包装器

我试图创建一个具有旋转内容的框，只需使用一个具有指定宽度和

溢出：隐藏
的外框，以及具有
显示：内联块的内框；宽度：100%
。一切都按预期进行，直到我为三个“内容框”中的每一个添加了一个图像。即使图像足够窄，可以很好地适应可用空间，但外部长方体的父元素现在开始溢出其父元素，从而使旋转长方体变宽（因为它具有相对宽度）。问题在FF（28）和IE（11）中是相同的，但在Chrome中情况很好

最后，我将其归结为一个表布局问题，因为在表祖先上添加
table layout:fixed
会阻止旋转框的父对象不必要地增长。（由于遗留原因，存在用于布局的表格。）

我现在想知道的是为什么会发生这种情况，以及我的盒子设计方法是否有问题。我已经创建了下面这个问题的一个最小示例（fiddle at）

（在本例中，我使用了
overflow:visible
而不是
hidden
，以便于查看正在发生的事情。我还使用了内联块之间的空白，这不利于布局，但有利于清晰度。）

HTML
请注意，在小提琴中，表格单元格（中灰色）比包装（深灰色）宽，但仍然不够宽，无法容纳所有三个内容框（紫色）。还要注意，因此，旋转箱（黄色边框）比包装的预期50%宽。还要注意的是，内部框（红色）应该是每个内容框中最宽的部分，它并不能决定每个框的宽度。
表格应该只用于表格数据（除非它是电子邮件模板），因此我写道“由于遗留原因，有一些表格用于布局。”。该网站正在使用非常旧的页面模板。我认为这与你的
空白区有关：nowrap.slidePanes
上选择code>。您正在尝试生成一个相当复杂的表布局，但正如您已经发现的，
table layout:fixed
应该可以修复它。nowrap
旨在强制内容框并排保留，即使没有空间容纳它们（这样它们就会溢出并隐藏，这样我就可以使它们进入和离开视图）。
<div id="wrapper">
    wrapper
    <table>
        <tbody>
            <tr>
                <td id="cell">
                table cell
                    <div class="niceBox slidePanes" id="outerBox">
                        <span class="slidePane">
                            .slidePane
                            <div class="body">
                                <div class="inner">inner box</div>
                            </div>
                        </span>
                        <span class="slidePane">
                            .slidePane
                            <div class="body">
                                <div class="inner">inner box</div>
                            </div>
                        </span>
                        <span class="slidePane">
                            .slidePane      
                            <div class="body">
                                <div class="inner">inner box</div>
                            </div>
                        </span>         
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

.niceBox {
    border: 1px solid #d7d7d7;
    background-color: #f6f6f6;
}

.slidePanes {
    overflow: visible;
    white-space: nowrap;
}

.slidePanes .slidePane {
    display: inline-block;
    width: 100%;
    white-space: normal;
    vertical-align: top;
    background-color: #bbf;
    padding: 5px 0;
}

#wrapper {
    width: 525px;
    background-color: #888;
}

#cell {
    background-color: #bbb;
}

#outerBox {
    width: 50%;
}

div.inner {
    width: 230px;
    background-color: #f88;
}