似乎 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 ......但我找不到有效的组合。
另外,我试图避免对宽度进行硬编码。