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

Question

我尝试创建一个包含旋转内容的框，只需使用指定宽度为overflow: hidden的外框和带display: inline-block; width: 100%的内框。一切都按预期工作，直到我在三个内容框中添加了一个图像＆＃34;。即使图像足够窄以适应可用空间，外盒也是如此。父元素现在开始溢出其父元素，反过来使旋转框更宽（因为它具有相对宽度）。在FF（28）和IE（11）中问题是相同的，但Chrome中的情况很好。

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

我现在想知道为什么会发生这种情况，以及如果我的方法出现问题。我在下面创建了一个问题的最小例子（在http://jsfiddle.net/rvy2V/9/处小提琴。）

（在示例中，我使用overflow: visible代替hidden，以便更容易看到正在发生的事情。我在内联块之间也有空格，这对布局不利，但清晰度很高。）

HTML

<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>

CSS

.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;
}

请注意，表格单元格（中灰色）比包装纸（深灰色）宽，但仍然不够宽，不能包含所有三个内容框（紫色）。还要注意，旋转盒（黄色边框）比预期的50％包装纸宽。还要注意内框（红色）（每个内容框中应该是最宽的东西）是如何确定每个框的宽度的。