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一个边框，其颜色与背景颜色相同。

小提琴显示：JS Fiddle

Answer 2

执行以下操作

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

删除其他边框详细信息。

Answer 3

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

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

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

Answer 4

您可以使用jquery或javascript DOM：

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

或

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

即使是有和没有边框的div的高度

4 个答案: