CSS 表格单元格宽度适用于 Chrome，但不适用于 FF 或 IE答案

【问题标题】：CSS table-cell widths work in Chrome but not FF or IECSS 表格单元格宽度适用于 Chrome，但不适用于 FF 或 IE
【发布时间】：2013-03-27 05:30:51
【问题描述】：

我发现，使用 display:table-cell 是一种使事物垂直居中的有用方法——尤其是在静态 px 尺寸不起作用的 RWD 环境中。我正在尝试让徽标 img 和一些文本在不使用浮动的情况下彼此垂直居中。

在 Chrome 中，它按预期工作。当浏览器变小时，img 变小并且文本换行等等。但在 FF、IE 9 和 Opera 中，图像不会缩小，实际上似乎所有的宽度和高度声明都被忽略了。

我可以对我当前的 HTML/CSS 进行一些更改来解决这个问题吗，或者 Chrome 支持我当前的布局是一个令人高兴的错误，我要解决这一切都是错的？

谢谢！

【问题讨论】：

【解决方案1】：

我傻了，我刚刚想通了。

最大宽度仅适用于块级元素，因此 img {max-width:100%;} 声明不起作用，这会阻止图像具有可变宽度。通过定位 img 并为其设置 width:100% 来清除该问题；轰隆隆！

【讨论】：

【解决方案2】：

display:table-cell 在父元素中没有相应的display:table-row 和display:table 时实际上并不打算使用。

你没有那个，而且你显然不想将它用作表格单元格。尽管您可能在使用它来居中内容方面取得了一些成功，但这并不是它的设计目的，因此它并不适用于所有浏览器也就不足为奇了。

如果你真的想为此使用table-cell，但它并没有按照你的意愿去做，也许你可以尝试将table-row 和table 样式添加到父元素（你可能需要为此添加额外的标记，因为如果您将它们放在wrapper 和header 上，它们将对现有样式产生影响。

【讨论】：

我喜欢语义并按预期使用事物，但似乎没有另一种方法可以让元素在不设置高度或负边距的情况下相对于彼此垂直居中。您是否知道一种实现垂直对齐的方法，同时避免我上面描述的所有混乱并在语义上正确？
我不一定说“不要使用table-cell”（CSS 与语义并不真正相关，所以这不是问题）。我的意思是，如果你将它与table-row 和table 结合使用，它可能会更好地工作，因为它就是这样设计的。