HTML5：左の「表示：テーブル・セル」の画像要素は、右の要素にコンテンツを押し下げ

Question

この小さなバイオリンを考える：http://jsfiddle.net/5Sw3h/8/

を私は左側のナビゲーションパネル、センターへのコンテンツパネルを持って与えること右側のパネルにも小さなスペースがあります。これらは、 "display：table、display：table-cell"セマンティクスを使用して配置されます。

私は現在、そこにほとんどの画像のために、ダウンいくつかによって、コンテンツパネル内のコンテンツをプッシュするようだ左側のパネルにコンテンツを置くことを経験しています。しかし、それは一般的に少しコンテンツをプッシュするようです。

かなりの要素でパディングを0に設定しようとしましたが（私が最初に考えていたように）、次にコンテンツボックスの垂直方向の配置を試しました。しかし、何が本当に私は、私はちょうどそれを見つけることができない、いくつかの明白なことを見落としている必要があります知っている...

を助けていません。

誰もが私が行方不明です見つける私を助けることができますか？あなたはdisplay: table-cellを持って

Answer 1

は、vertical-align: topを追加します。

vertical-alignの初期値はbaselineであり、これはミスアライメントの原因となっています。すでに偉大な答えを提供thirtydot

Answer 2

。しかし、SafariとOperaの新しい問題に直面するので、すべての表のセル要素に幅を設定してください。別の問題は、IE6/7のdisplay table/table-cellサポートです。ここでは、Tanalinによって書かれたHTCスクリプトhttp://tanalin.com/en/projects/display-table-htc/を使用できます。