display:table-cell;を安易に使うべきでない理由いろいろ - Qiita

http://qiita.com/sawadays0118/items/4c329fd05cdff14ffebc

レスポンシブ対応のグリッドレイアウトを実現する代替案

レガシーIEでも対応したい

• floatと高さを揃えるJS（fixHeight.js）がベスト
• 次点でdisplay:inline-block;と高さを揃えるJSだが、CSSだけでグリッドの並び順を逆にすることが不可能。
• 高さを揃えるJSを使わずにmin-heightで何とかしようとするのは、テキスト量が増減したときに困る上に、モジュールごとに固有のmin-heightを指定しなければならない、文字サイズ拡大に対応できないなどの弊害があるため現実的ではない。（ちなみに高さを揃えるJSだったら何でも良いわけではなく、文字サイズ拡大やウィンドウのリサイズに対応していて、行ごとに高さを揃える個数を指定しないで済むfixHeight.jsがオススメ）

IE10からの対応でOK

• display:flexbox;（ベンダープレフィクス必須、IE11以降はdisplay:flex;）
• そして、毎度のことながらIE様のバグには注意

Normalizing Cross-browser Flexbox Bugs — Philip Walton
http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/

• 追加でFlexboxのpolyfillがあったので紹介します

IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！ | Webクリエイターボックス
http://www.webcreatorbox.com/tech/ie8-flexbox/