Question

我有一个div，我需要保持宽度＆amp;高度恒定，不应因边界而变化填充适用于它。我使用了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

好吧，边框将显示在左侧和右侧/顶部和底部 - 每个都是60px，因此总共有120px的边框大小。你能够强制调整大小保持在100px范围内的唯一方法是使用JS强制边框为＆lt; = width / height除以2。

Answer 2

因为你的边框尺寸大于你的宽度和高度

此元素上指定的宽度和高度（以及相应的最小/最大属性）确定元素的边框。也就是说，元素上指定的任何填充或边框都布局并在此指定的宽度和高度内绘制。通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算内容宽度和高度。由于内容宽度和高度不能为负（[CSS21]，第10.2节），因此该计算为0。

参考

http://dev.w3.org/csswg/css-ui/#box-sizing

Answer 3

除了JavaScript之外，没有办法限制边框宽度本身。可能的基于CSS的解决方案涉及伪装。

例如，您可以使用div和max-width围绕带边框的max-height，如下所示：http://jsfiddle.net/3k9Ac/（这不一定是一个很好的解决方案！）< / p>

或者你可以从其他HTML元素构建“边框”，获得边框的外观而不受CSS机制的阻碍 - 但是如果你走得那么深，你可能只需要使用一点JavaScript。

验证用户输入实际上只是最简单和最简单的方法。当用户超出合理的边框宽度时，您不一定要显示错误消息 - 相反，只要用户输入超过所选的最大值（例如10px），您就会默认为最大值。

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

3 个答案: