css - 在 FireFox 中使用显示表格单元格和 float 元素时宽度错误

Question

似乎 FireFox (17.0.1) 在使用 table-cell 和 float 元素的显示时错误地计算了宽度，其中它设置了父级宽度并且不包括父级宽度中的 float 元素的宽度.这似乎适用于 Chrome、IE8、IE9 和 IE10。

   <div style="position:absolute">
    <div style="position:relative">
        <div class="option">
            <div>
                <div class="right">right text</div>
                <div class="cell">content item 1</div>
            </div>
        </div>
        <div class="option">
             <div>
                 <div class="right">right</div>
                 <div class="cell">content</div>
             </div>
        </div>
    </div>
</div>
<style>
    .right {float:right;}
    .cell
    {
        display:table-cell;
        height:30px;
        vertical-align:middle;
        border:1px solid green
    }
</style>​

如果可能，我正在寻找仅 CSS 的修复程序，因为它已经存在。一些 HTML 可能没有意义，但我删除了 90% 以使示例更清晰。

我注意到一些表格单元格错误，其中某些父元素需要显示:表格、显示:表格行……但我找不到有效的组合。

此外，我正在努力避免对宽度进行硬编码。

Answer 1

通过删除 float: right; 让您的生活更轻松并在容器 div 上添加 display: table-row;:

http://jsfiddle.net/Riskbreaker/u9RU4/1/

我在 FF-Chrome-IE9 和 IE8- 以及 Safari 中为您测试了这个。......除非你需要 float ....