html - 在 div 上使用 `display:table-cell` 有缺点吗？

Question

我想要完成的是有一个固定宽度的第一个 div 和一个流动的第二个 div，它将填充父 div 宽度的其余宽度。

<div class='clearfix'>
  <div style='float:left; width:100px;'>some content</div>
  <div style='float:left'>some more content</div>
</div>

在这一个上，一切似乎都很好，很流畅。

<div style='display:table'>
  <div style='display:table-cell; width:100px;'>some content</div>
  <div style='display:table-cell'>some more content</div>
</div>

我想继续第二个，但我觉得第二个例子以后会让我头疼。

您能提供一些建议或见解吗？

Answer 1

display: table-cell 使用起来非常好，只有一个缺点..

它在 IE7(或 IE6，但谁在乎？)中不起作用:http://caniuse.com/#search=css-table

如果不需要支持IE7，可以放心使用。

IE7 仍然有some usage ，但您应该检查您的分析，然后再做出决定。

---

要回答您的特定用例，您可以在没有display: table-cell的情况下完成，前提是您不需要height 根据内容调整:

http://jsfiddle.net/g6yB4/

<div class='clearfix'>
  <div style='float:left; width:100px; background:red'>some content</div>
  <div style='overflow:hidden; background:#ccc'>some more content</div>
</div>

(为什么 溢出:隐藏？有:http://jsfiddle.net/g6yB4/3/ vs 没有:http://jsfiddle.net/g6yB4/4/)