Css 跨浏览器的按钮间距不一致？

剃刀语法

铬

Chrome看起来非常好，其性能完全符合我的预期

Edge&internetexplorer11

IE和Edge似乎有一个看不见的边距，没有显示在inspector中

问题是当我在inspector中查看按钮时，它们没有边距。但是，设置左边距：-4px；在过滤器/加载按钮上可以解决此问题；因此，@isIE？左边距：-4px；：上面

问题

我不想添加一个只适用于IE和Edge的特殊CSS规则。 加载按钮的右侧与上面的元素并不完全对齐，它介于-4px和-5px之间。 问题:

是否有一些CSS规则我可以始终应用，不会破坏chrome中的视觉效果，但会修复IE和Edge中的视觉效果

---

我添加了一个显示它的。如果你在chrome中打开它看起来是正确的，如果你在IE或Edge中打开它，按钮之间会有一个间隙。如何以非例外的方式解决这个问题？

我不知道这是最好的解决方案，但我相信我已经找到了

.input-group {
  font-size: 0px;
}

.input-group > span,
.input-group > input,
.input-group > button {
  font-size: 14px;
}

这似乎消除了按钮之间的间隙，而不会对chrome造成负面影响，但在chrome上看起来仍然一样

贴纸指出这可能与引导相关，这让我在谷歌上找到了这一结果

---

出现间隙的原因是由于这些元素的显示属性。当两个元素被设置为内联或内联块，并且在HTML中它们之间至少有一个空格字符时，它不会像块元素那样被忽略。其目的是可以在文本体中插入跨距或其他内联元素，并尊重周围的空白

也就是说，您希望使用相邻的内联块元素，并且没有这种间隙，这种情况并不少见。有3种解决方案

1将父元素的字母间距设置为负值，然后将子元素的字母间距设置回正常值。在你的小提琴中，那将是：

div {
  letter-spacing:-100px;
}
div * {
  letter-spacing:normal;
}

2消除标记中的空白，使标记相互接触。这可能看起来很难看，但这会解决问题

---

3使用不同的方式设置元素的样式。例如，使用display:block and float:left，或者使用flexbox作为另一个提到的答案。

通常使用flexbox，但您的问题似乎太宽泛了。我添加了一个JSFIDLE来复制这个问题，我希望这有助于减少问题的宽泛性？现在我们知道这确实是一个引导问题，而不是专家，我希望有人会帮助。啊，好吧，尽管找到了解决办法，我还是很好奇为什么它会这样，谢谢！

div {
  letter-spacing:-100px;
}
div * {
  letter-spacing:normal;
}