我需要在内联 block div 元素中显示一个表格。
Chrome、Internet Explorer、Safari 和 Opera 都呈现相同的表格,无论它是 block div 元素还是内联 block div 元素的子元素,这正是我所期望的。示例:
另一方面,当包含的 div 的显示属性为 inline-block 时,Firefox 会缩小表格。示例:
JSFiddle:http://jsfiddle.net/PvZ2d/7/
标记:
table {
table-layout: fixed;
}
td {
background: red;
width: 33%;
}
<div>
<table>
<tbody>
<td>Content</td>
<td>More Content</td>
<td>Even More Content</td>
</tbody>
</table>
</div>
<div style="display:inline-block;">
<table>
<tbody>
<td>Content</td>
<td>More Content</td>
<td>Even More Content</td>
</tbody>
</table>
</div>
<br />
<div style="display:inline-block;">
<table>
<tbody>
<td style="white-space:nowrap;">Content</td>
<td style="white-space:nowrap;">More Content</td>
<td style="white-space:nowrap;">Even More Content</td>
</tbody>
</table>
</div>
问题:我该如何解决这个问题?这是 Firefox 中的错误吗?
根据规范(http://www.w3.org/TR/CSS2/visuren.html#propdef-display):
The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
鉴于此,我不明白为什么将 display 属性更改为 inline-block 会改变子元素的布局。
最佳答案
在收缩包装的情况下,内联 block 的宽度应该是表格的首选宽度,在 Firefox 中似乎是列的首选宽度的总和;在这个阶段,百分比宽度被忽略,因为它没有任何百分比。
非内联 block 没有收缩包装宽度,因此上述内容不适用;该 block 与页面主体一样宽,然后将表格放在其中。此时祖先宽度已知,因此可以应用百分比宽度。
规范没有指定在这种情况下的渲染,所以很遗憾,很难说任何特定的渲染是对还是错。
关于html - Firefox 正在缩小内联 block div 中的表格。这里发生了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20062478/