1

似乎 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 ......但我找不到有效的组合。

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

4

1 回答 1

2

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

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

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

于 2013-01-02T19:14:35.810 回答