我在上面没有看到的一个解决方案是在输入上填充，我99%的时间都是这样做的。你可以按照……

input {
  padding: 8px;
}

input.invalid {
  border: 2px solid red;
  padding: 6px; // 8px - border or "calc(8px - 2px)"
}

我喜欢的是，我有一个完整的菜单，每边的边框+填充+过渡属性。

也许这是一个迟来的答案，但我想分享我的发现。我发现了2种解决这个问题的新方法，这是我在答案中没有发现的:

内边框通过box-shadow css属性

是的，box-shadow用于为元素添加box-shadow。但你可以指定嵌入阴影，它看起来像一个内边框，而不是一个阴影。你只需要将水平和垂直阴影设置为0px，并将盒子阴影的“spread”属性设置为你想要的边界宽度。所以对于10px的“内”边框，你可以这样写:

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

下面是一个jsFiddle示例，演示了盒影边框和“正常”边框之间的区别。这样你的边框和盒子宽度总共是100px，包括边框。

更多关于box-shadow的内容:这里

通过outline css属性设置边框

这是另一种方法，但这种方法的边界将在框外。这里有一个例子。 如下例所示，您可以使用css outline属性，来设置不影响元素宽度和高度的边框。这样，边框宽度就不会被添加到元素的宽度中。

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

更多关于大纲的内容:这里

使用伪元素:

.button { 背景:# 333; 颜色:# fff; 浮:左; 填充:20 px; 保证金:20 px; 位置:相对; ｝ {后.button:: 内容:”; 位置:绝对的; 上图:0; 右:0; 底部:0; 左:0; 边框:5px solid #f00; ｝ < div class =”按钮“> < / div >你好

在样式化选定元素的虚拟最后一个子元素之后使用::。内容属性创建匿名替换元素。

我们使用相对于父元素的绝对位置来包含伪元素。然后你可以自由地在你的主元素的背景中设置任何自定义背景和/或边框。

这种方法不会影响主元素内容的位置，这与使用box-sizing: border-box;不同。

想想这个例子:

.parent { 宽度:200 px; ｝ .button { 背景:# 333; 颜色:# fff; 填充:20 px; 边框:5px solid #f00; border-left-width: 20 px; box-sizing: border-box; ｝ < div class =“父”> < div class =”按钮“> < / div >你好 < / div >

这里.button的宽度使用父元素约束。设置左边框宽度可以调整内容框大小，从而调整文本的位置。

.parent { 宽度:200 px; ｝ .button { 背景:# 333; 颜色:# fff; 填充:20 px; 位置:相对; ｝ {后.button:: 内容:”; 位置:绝对的; 上图:0; 右:0; 底部:0; 左:0; 边框:5px solid #f00; border-left-width: 20 px; ｝ < div class =“父”> < div class =”按钮“> < / div >你好 < / div >

使用伪元素方法不会影响内容框的大小。

根据应用程序的不同，使用伪元素的方法可能是也可能不是理想的行为。

如果你使用box-sizing: border-box不仅表示边框， 填充、保证金等。所有元素都将进入父元素 元素。

Div p { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 宽度:150 px; 高度:100%; 边框:20px实体#f00; background - color: # 00 f; 颜色:# fff; 填充:10 px; ｝ < div > 它在20世纪60年代随着Letraset床单的发行而流行起来 < / div >

我知道这有点老了，但由于关键字“内部边界”直接把我带到了这里，我想分享一些值得在这里提到的发现。 当我在悬停状态上添加边界时，我得到了OP所说的效果。边框的广告像素与盒子的尺寸一致，这使它跳动。 还有另外两种方法也适用于IE7。

1） 有一个边界已经附加到元素，并简单地改变颜色。这种方法已经包含了数学。

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2) 用负边缘补偿你的边界。这仍然会增加额外的像素，但元素的位置不会跳跃

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}

设置box-sizing属性为border-box:

div { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 宽度:100 px; 身高:100 px; 边框:20px实体#f00; 背景:# 00 f; 保证金:10 px; ｝ Div + Div { 边框:10px纯红色; ｝ < div >你好!< / div > < div >你好!< / div >

它适用于IE8及以上版本。