css - Firefox 和 Chrome 中有效 HTML 5 代码的不同表示

Question

以下代码在 Chrome 和 Firefox 中显示不同:

#category-chooser {
  width: 600px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="btn-group-vertical" id="category-chooser">
	<div class="btn-group btn-group-justified" data-toggle="buttons">
		<div class="btn-group">
			<button class="btn btn-default">
				a lot of content... foo bar foo bar
			</button>
		</div>
		<div class="btn-group" role="group" id="choose-furniture">
			<button class="btn btn-default">
				short
			</button>
		</div>
	</div>
	<div class="btn-group btn-group-justified" data-toggle="buttons">
		<div class="btn-group">
			<button class="btn btn-default">
				short
			</button>
		</div>
		<div class="btn-group">
			<button class="btn btn-default">
				a lot of content... foo bar foo bar
			</button>
		</div>
	</div>
</div>

引导类似乎在这里做了一些奇怪的事情。但是，在 bootstrap page 上，该示例似乎在所有浏览器中都运行良好。

在 Chrome 中，“列”的间距与内容成比例。在 Firefox 中，所有列的宽度都相同。

Answer 1

btn-group-justified 使用 display: table，但是 CSS 被 btn-group-vertical 覆盖为 显示: block 。我想当父容器不显示为表格时，浏览器会以不同方式处理 btn-group (display: table-cell)。

您的代码看起来不错，Bootstrap 示例没有显示 btn-group-vertical 和 btn-group-justified 的混合使用。我相信这是没有描述的限制。

我建议删除 btn-group-vertical 并自行调整 border-radius。