CSS表格单元格宽度可以在Chrome中使用，但不适用于FF或IE

Question

使用display：table-cell，我发现，这是一种将事物垂直居中的有用方法 - 尤其是在静态px维获胜的RWD上下文中没有工作。我试图让徽标img和一些文本垂直居中对方，而不使用浮动。

请看这里： http://dabblet.com/gist/5249192。

在Chrome中，它按预期工作。当浏览器缩小尺寸时，img会变小，并且文字会变成一些东西。但在FF，IE 9和Opera中，图像不会缩小，实际上它似乎忽略了所有宽度和高度声明。

我可以对当前的HTML/CSS进行一些修改来解决这个问题，或者是Chrome支持我当前的布局是一个很好的错误，而且我正在讨论所有错误？

谢谢！

Answer 1

傻了，我只是想通了。

最大宽度仅适用于块级元素，因此img {max-width：100％;}声明不起作用，这会阻止图像具有流体宽度。通过定位img并给出宽度来清除问题：100％;繁荣！

Answer 2

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

你没有那个，你显然没有试图用它作为表格单元格。尽管你可能在使用它来集中内容方面取得了一些成功，但这不是它设计的目的，所以它不适用于所有浏览器。

如果你真的想用table-cell对于这一点，它没有做你希望它是什么，也许你可以尝试添加添加table-row和table风格的父元素（可能需要为此额外的标记，因为他们会如果您将它们放在wrapper和header），则会对现有样式产生影响。