Question

FireFox（17.0.1）似乎在使用table-cell和浮动元素的显示时错误地计算宽度，其中它设置父宽度并且不包括父宽度中浮动元素的宽度。这似乎适用于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在某些父元素上是必需的......但我找不到有效的组合。

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

Answer 1

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

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

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

在FireFox中使用display table-cell和浮动元素时，宽度错误

1 个答案: