CSS-框大小调整：边框仍会向整体高度添加边框

Question

我试图并排放置两个按钮，其中一个具有边框，并且两个按钮的高度相同。但是，即使我使用box-sizing: border-box，边框仍会添加到高度中。

以下是链接：

.btn {
  padding: 10px;
  text-align: center;
  line-height: 1.15;
  border: 0;
  cursor: pointer;
  box-sizing: border-box;
}

.dib {
  display: inline-block !important;
}

.btn {
  background-color: initial;
  text-align: initial;
  letter-spacing: initial;
  -webkit-transition: initial;
  transition: initial;
  -webkit-box-shadow: initial;
  box-shadow: initial;
  height: initial;
  border-radius: initial;
  vertical-align: initial;
  text-transform: initial;
}

.btn,
.btn-large,
.btn-small {
  text-decoration: none;
  color: #fff;
  background-color: #26a69a;
  text-align: center;
  letter-spacing: .5px;
  -webkit-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;
  cursor: pointer;
}

.btn,
.btn-large,
.btn-small,
.btn-flat {
  border: none;
  border-radius: 2px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  text-transform: uppercase;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}

.btn-ghost-secondary {
    background-color: transparent;
    border: 2px solid #261a94;
}

<a class="btn btn-ghost-secondary dib">Delete Entity</a>
<a class="btn btn-secondary dib">Edit Entity</a>

我对border-box的理解使我相信btn-ghost-secondary按钮的高度应不受2px边框的影响，但其高度比其同级高度高4px。

我什至尝试删除除显示，填充，框大小和边框以外的所有样式（您可以在左侧的按钮中看到不同）：