Question

我有这个css在聚焦时突出显示输入：

input:focus, textarea:focus{  
  background-color: #FFFF99;  
  border-width: 1px;  
  border-style:solid;  
  border-color:Black;  
}

我刚刚注意到，当我点击一个文本框时，它会缩小一个非常小但很明显的数量。上面的CSS会改变宽度和宽度有什么理由吗？我把焦点放在文本框的高度？

我正在使用firefox 3.16

Answer 1

它会缩小，因为textarea input的默认边框是2-3px而你只是在焦点状态下将它们覆盖为1px

如果您将默认边框覆盖为相同的宽度，它将不会缩小，例如：

input, textarea {
  border: 1px solid #444;
}

input:focus, textarea:focus{  
 background-color: #FFFF99;  
 border-width: 1px;  
 border-style:solid;  
 border-color:Black;  
 }

更新

保留原始尺寸而不重新计算边框，这似乎有效：

input, textarea {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  width: 300px;
  height: 50px;

}

input:focus, textarea:focus{  
 background-color: #FFFF99;  
 border-width: 1px;  
 border-style:solid;  
 border-color:#000;  
 }

Answer 2

这是由于Box Model。

当你应用1px边框宽度时，它必须从你的元素水平和垂直“吃掉”2px（每侧1个）。

Answer 3

这可能有效：

input, textarea {
  border: 1px solid #444;
  paddding:1px
}

input:focus, textarea:focus{  
 background-color: #FFFF99;  
 border-width: 1px;  
 border-style:solid;  
 border-color:Black; 
padding:0 
 }

为什么border css会缩小firefox中的宽度

3 个答案:

更新