（基础）按钮上的边框会导致对齐问题

Question

我在设计两种不同样式的按钮时遇到问题。第一个按钮应该是带有 2px 边框的透明背景，下一个按钮只是基础按钮的默认样式，即没有边框。我认为 *{box-sizing: border-box;} 可以使按钮大小相同，而不管 padding/border/margin。我认为这可能行不通，因为我没有指定 width/height，但即使我这样做，它也只是将正常按钮推离对齐 2px 的效果，甚至我仍然想要按钮根据里面的文字是自然宽度。

对我来说最简单的解决方案是在普通按钮上添加一个与背景颜色相同的边框，但最终我不得不为悬停、活动等边框添加样式...似乎应该有更好的方法。我是不是做错了什么？

这是我所在位置的 jsfiddle：http://jsfiddle.net/xa4d4bfv/

Answer 1

添加透明颜色的边框如何。

a.button { 
  border: 2px solid transparent;
}

Answer 2

按钮轮廓class应该如下

.button-outline {
    border:2px solid #222;
    color: #222;
    background-color: rgba(0,0,0,0.0);
    padding: 0.9rem 2rem 0.9rem 2rem !important;
}

不过 Suslov 的回答还是不错的，我的也行，如果你让按钮保持相同的大小

（基础）按钮上的边框会导致对齐问题

(Foundation) Border on button causes alignment issues

html

css

border-box

zurb-foundation