带和不带边框的 div 上的均匀高度答案

【问题标题】：Even height on divs with and without a border带和不带边框的 div 上的均匀高度
【发布时间】：2023-04-06 00:00:01
【问题描述】：

我可以制作两个具有 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;
}

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

【问题讨论】：

标签： html css border-box

【解决方案1】：

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

小提琴显示这个：JS Fiddle

【讨论】：

【解决方案2】：

执行以下操作

.button1 {
   outline: solid #666 4px;
}

移除其他边框细节。

【讨论】：

【解决方案3】：

您可以使用 CSS 中的 calc 函数将 4px 的内边距添加到第二个按钮。这不会将边框放在 div 内，而是调整第二个 div 上的填充以匹配第一个...

.button2 {
  padding: calc(1em + 4px);
  background-color: #e54;
  display: inline-block;
}

在 IE8 或更低版本中不起作用，但话又说回来，什么起作用？这是一个小提琴：http://jsfiddle.net/a8LT7/

【讨论】：

【解决方案4】：

您可以使用 jquery 或 javascript DOM：

$(".button2").css({"height":$(".button2").height() - 8px});

或

var height = document.getElementsByClassName("button1")[0].setoffHeight;
$(".button2").css({"height":height});

【讨论】：

这是一个很好的例子，使用 Javascript 来解决可以通过 CSS 更容易解决的问题。