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），則會對現有樣式產生影響。