Question

以下代码在Chrome和Firefox中的显示方式不同：

＆＃13;

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

＆＃13;

<div class="container" id="vueApp">
  <div class="content">
    <div class="title animated flipInX">BIG TITLE</div>
    <p><strong>Some subtitle</strong></p>
    <custom-button fa-icon="fa-home"></custom-button>
    <custom-button fa-icon="fa-envelope"></custom-button>
    <custom-button fa-icon="fa-info"></custom-button>
  </div>
</div>

<template id="btn-template">
    <span class="btn fa @{{ fa-icon ? fa-icon : 'fa-star-o' }} font-size-40"></span>
</template>

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.14/vue.min.js"></script>

<script>
  Vue.component('custom-button', {
      template: '#btn-template',
      props: ['fa-icon'],
  });
</script>

＆＃13;

引导类似乎在这里做了一些奇怪的事情。但是，在https://docs.djangoproject.com/en/1.9/releases/1.9/上，该示例似乎可以在各种浏览器中正常运行。

在Chrome中，＆＃34;列＆＃34;与内容成比例地间隔开。在Firefox中，所有列都具有相同的宽度。

Answer 1

btn-group-justified使用display: table，但是btn-group-vertical覆盖了CSS display: block。我想当父容器不显示为表时，浏览器处理btn-group（display: table-cell）的方式不同。

您的代码看起来很好，Bootstrap示例不会混合使用btn-group-vertical和btn-group-justified。我认为这是没有描述的限制。

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

Firefox和Chrome中有效HTML 5代码的不同表示形式

1 个答案: