html - 带边框和不带边框的 div 上的高度均匀

Question

我可以制作两个具有 1em 内边距的按钮 - 一个具有背景颜色，另一个具有边框，以具有相同的高度吗？基本上是在 div 内部设置边框。

尝试使用 box-sizing: border-box;方法，但这并没有解决我的问题。

HTML:

<div class="button1">Button1</div>
<div class="button2">Button2</div>

CSS:

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.button1 {
    padding: 1em;
    border-style: solid;
    border-color: #666;
    border-width: 4px;
    display: inline-block;
}

.button2 {
    padding: 1em;
    background-color: #e54;
    display: inline-block;
}

我无法理解它，这似乎是一个合乎逻辑的解决方案。提前致谢。

Answer 1

给 .button2 一个颜色与其背景色相同的边框。

fiddle 显示:JS Fiddle