Chrome和＆amp ;;中的ng-repeat和按钮间距Edge＆amp;火狐

Question

我在所有浏览器上都有一个非常奇怪的行为，我希望有人可以向我解释。

<div style="margin-top:5px">
    <button translate="clear" ng-click="xyz.clear()" class="btn btn-default"></button>                
    <button ng-repeat="operation in xyz.operations" class="btn btn-default">{{operation.name}}</button>
</div>

在div中我有一个按钮，另一个按钮元素上有一个ng-repeat。第一个静态＆＃39;按钮和ng-repeat渲染的第一个按钮有一些我不希望的间距。我没有找到任何有关为什么按钮之间有空间的信息，但是它在我测试的所有浏览器上都是有用的，所以我想必须有一个理由与Angular的ng-repeat一起使用。

以下是Chrome在Dev-Tools Elements上显示的内容：

似乎没有任何CSS选择器匹配元素的位置。当我使用Dev-Tools在DOM中对它们重新排序时，奇怪的行为仍然存在：

元素的计算框对于所有按钮都是一样的，这是这样的：

Answer 1

这个问题几乎与ng-repeat的工作原理无关。按钮元素默认显示内联块（MDN）

为了对抗按钮之间的空间，只需给它们留下负5px的边距

This CSS-tricks主题值得一读，下面是你的问题及其解决方案的演示

#fix button{
  display: inline;
  margin-right: -5px;
}

<div id="problem">
  <button>clear</button>
  <button>clear</button>
  <button>clear</button>
</div>

<div id="fix">
  <button>clear</button>
  <button>clear</button>
  <button>clear</button>
</div>