css - Firefox 不正确地显示表格单元格（chrome 运行良好）

Question

我正在设计由几个 div 组成的网站布局。整个站点都在容器中。徽标下的所有内容都是构造的，然后我将内容包装在内容包装器中。Content-wrapper 有 2 个孩子：sidebar-wrapper 和 main-wrapper。我想在 main-wrapper 中设计一些东西，但它在 Firefox 中显示不正确。主栏和侧边栏都设置为显示表格单元格，但是如果我在主包装器右侧添加带有文本的 img，则主包装器宽度会发生变化，并且它比父 div（内容包装器）宽一些。它发生在 Firefox 和 IE 中（chrome 运行良好）。以下是在 Firefox 和 chrome 中启用开发工具拍摄的一些图像。

铬合金：

火狐：

那么有没有办法让表格单元格填充父宽度或以某种方式解决这个问题？

Answer 1

您是否尝试过table-layout:fixed;包装器 div （指定的那个display: table;）？

我遇到了类似的问题，此属性强制表格为固定宽度，而不是由其内容确定。默认情况下，表格列设置为行中最宽单元格（带有易碎内容）的宽度，在您的情况下为图像，因此第二列太大:)

更多信息table-layout可以在这里找到

Answer 2

将以下行放在表格类中

table-layout: fixed;