Question

我有以下代码 - 在IE中正确渲染（奇怪的是），但在Chrome或FireFox中没有，请参阅：

.btn_group_fill { display:table;table-layout:fixed;width:100%; }
.btn_group_fill .btn { display:table-cell;float:none; }

基本上带有“btn_group btn_group_fill”的元素应该跨越整个宽度 - 它在IE中执行 - 但不是在chrome或firefox中 - 显然，我缺少一些CSS元素（或组合）;如果任何有洞察力的人都可以发现我的错误，我会很感激...

由于

Answer 1

我认为这是button元素特有的。据推测，浏览器对如何呈现这些内容有不同的看法。如果您将其更改为span或div，则会按预期进行渲染。

<div class="btn_group btn_group_fill">
    <div type="button" class="btn btn_primary">Group Button 1</div>
    <div type="button" class="btn btn_default">Group Button 2</div>
    <div type="button" class="btn btn_default">Group Button 3</div>
</div>

Example fiddle

此外，如果您希望“单元格”共享边框，则此处的border-collapse属性可能很有用。

border-collapse: collapse; /* is 'separate' by default */

CSS table-cell在Chrome或FireFox中不起作用？

1 个答案: