在 FireFox 中使用显示表格单元格和浮动元素时宽度错误答案

【问题标题】：Width wrong when using display table-cell and floated element in FireFox在 FireFox 中使用显示表格单元格和浮动元素时宽度错误
【发布时间】：2017-05-18 18:17:15
【问题描述】：

在使用表格单元格和浮动元素的显示时，FireFox (17.0.1) 似乎计算宽度不正确，它设置父宽度并且不包括父宽度中浮动元素的宽度.这似乎适用于 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% 以使示例更清晰。

我注意到一些表格单元错误，其中某些父元素需要 display:table, display:table-row...但我找不到有效的组合。

另外，我试图避免对宽度进行硬编码。

【问题讨论】：

将float:left 添加到.cell 是一个选项吗？
不幸的是，这不起作用，因为它消除了表格单元格的好处，特别是垂直对齐。我更新了样本以恢复垂直对齐方式。
你能改一下顺序吗：把.cell放在.right前面？
@PavloMykhalov 你想说什么？
@ZackT。你可以给.rightdisplay:table-cell，他们会站在一起。

标签： css firefox css-tables

【解决方案1】：

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

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

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

【讨论】：

关闭，但 float:right 右对齐内容。我更新了 HTML，所以第二个选项有更少的文本来突出显示布局。
这样呢？：.right { display: table-cell; float: right; }