在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，但谁在乎？）

如果您不需要支持IE7，请随时使用它。

IE7仍然有一些用法，但是您应该检查Analytics（分析），然后做出决定。

要回答您的 特定 用例，您 可以 不使用display: table-cell，只要您不需要height根据内容进行调整即可

<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>