为什么我的按钮大小不同，内容不同？

Question

使用Bootstrap 4和Material图标检查此示例：

似乎只有第一个按钮尺寸正确且图标正确对齐，而且图标尺寸都相同。

我注意到删除以下css代码修复了它：

.btn-icon::after{
  content: " "  attr(title);
  letter-spacing: -1rem;
  opacity: 0;
  transition: letter-spacing 0.3s ease-out, opacity 0.3s ease-out;
}
.btn-icon:hover::after{
    letter-spacing: normal;
    opacity: 1;
}

但我需要那种效果。为什么这个额外的＆＃34;幽灵填充＆＃34;被添加到非第一个按钮的右侧？我该如何解决这个问题？

JsFiddle：https://jsfiddle.net/xpvt214o/136541/

Answer 1

好的，所以我之前的回答有一些优点，但这不正确。 我现在有正确答案给你。这是差异;

你原来的jsFiddle;

 <button title="Button1" class="btn btn-outline-secondary btn-icon">
          <i class="material-icons">file_download</i></button> <!-- note the 0 space between button and i elements -->
        <button title="Button2" class="btn btn-outline-secondary btn-icon">
          <i class="material-icons">search</i><!-- What's this? -->
        </button>
        <button title="Button3" class="btn btn-outline-secondary btn-icon">
          <i class="material-icons">filter_list</i><!-- what's this? -->
        </button>

这是因为我们在这里使用内联元素。我们在button elemenent中嵌套了一些东西，这意味着它的行为有所不同。实际上，当你在所述元素中留下空白区域时，它的行为方式不同（并且浏览器并不是所有人都这样对待，即; Firefox创建空间而Chrome不会）。通常你不会注意到，但是因为:after在它后面创建内容，所以空格被渲染为空格（在firefox中）

因此，有两种方法可以解决这个问题;

简单的方法;从代码中删除空格

<button title="Button1" class="btn btn-outline-secondary btn-icon">
  <i class="material-icons">file_download</i></button>

或代码技术上凌乱的方式，但如果有人重新格式化您的代码，那么它将不会破坏，因此它更稳定，更值得信赖;

<button title="Button1" class="btn btn-outline-secondary btn-icon"><i class="material-icons">
  file_download
  </i><!-- These comments remove the effective html whitespace!!
 --></button>
<button title="Button2" class="btn btn-outline-secondary btn-icon">
  <i class="material-icons">search</i><!-- Because you are commenting them out!
--></button>
<button title="Button3" class="btn btn-outline-secondary btn-icon">
  <i class="material-icons">filter_list</i><!-- Amazing, isn't it?!
--></button>

这就是为什么我更喜欢使用div元素并将它们设置为按钮，但这会面临不同的问题。我只是避免使用这些内联元素，因为它们在浏览器中的处理方式不同。

- 哦，当然是JSFIDDLE！

Here is some more info处理inline-block元素及其空格！