javascript - 如果我给大填充/边框，边框框不工作

Question

我有一个 div，我需要在其中保持宽度和高度不变，并且不应因为应用了边框和填充而变化。我使用了 border-box 属性。它正在发挥一定的作用

div{
      border:1px solid black;
      width:100px;
      height:100px;
      -moz-box-sizing:border-box;
}

但在极端情况下失败了。

div{
      border:60px solid black;
      width:100px;
      height:100px;
      -moz-box-sizing:border-box;
}

这实际上是一个在线工具，用户可以在其中设置边框。所以他可以给出任何数字，但我想防止 div 随边框/填充而增长。

有没有办法用 CSS 或 javascript 来阻止它？如果我错了请告诉我。

Answer 1

好吧，边框将显示在左侧和右侧/顶部和底部 -- 各为 60 像素，因此边框总大小为 120 像素。您能够强制大小保持在 100px 以内的唯一方法是使用 JS 强制边框 <= 宽度/高度除以 2。