是否有使用`display:table-cell`on divs的缺点？

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仍然有一些用法,但你应该检查你的分析,然后做出决定.

要回答您的特定用例,您可以在没有基于内容进行调整的情况下执行此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>

(为什么overflow: hidden？用:http://jsfiddle.net/g6yB4/3/ vs without:http://jsfiddle.net/g6yB4/4/)