html - 使用 CSS 更改输入字段的外观会导致高度/宽度失真

Question

所以......一旦我向输入字段添加边框，高度和宽度就不会对齐。当我对它们应用边框时，所有文本字段都会显示一些失真......

红色长框为 167 x 21 像素。

长而普通的盒子是 168 x 23 像素。

我玩过很多不同的样式，但我似乎无法找到一种始终适用于我所有盒子的样式。这包括使用字体单位、填充框、指定精确的宽度和高度、指定边距......

目前款式：

   input[type=text] {
       font-family:courier;
       font-size:80%; 
       padding: 0.1em;
   } 

   input.error_required { 
       border: 1px solid red; 

       font-family:courier;
       font-size:80%; 
       padding: 0.1em;
   } 

我似乎无法弄清楚是什么导致了这种情况发生……这不是世界上最可怕的事情，但如果可以的话，我想纠正它。

第二个例子：

产生这个的过度风格：

   input[type=text] {
      font-family: courier;
      font-size:   80%; 
      padding:     0.1em;
      height: 20px; 
      margin: 0.1em;

   } 

   .input_error_required { 
      border: 1px solid red; 
      font-family: courier;
      font-size:   80%; 
      padding:     0.1em;
      height: 20px; 
      margin: 0.1em;
   } 

   .input_error_unique { 
      border: 1px solid orange; 
      font-family: courier;
      font-size:   80%; 
      padding:     0.1em;
      height: 20px; 
      margin: 0.1em;
   } 

html 基本上就是这样重复的：

<input name='real_server_name' type='text'></input>&nbsp;&nbsp;&nbsp;<input name='real_server_ip' type='text'></input>

Answer 1

尝试为所有输入框设置默认边框：1px solid #ccc

Answer 2

为什么不直接设置高度？

input[type="text"] {
    height:23px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

这些border-box东西是为了确保无论边界如何都能反映高度。在所有事情上都这样做是一种最佳实践，但我想我也会在这里指出。

编辑：听起来你实际上需要应用的border-box东西比明确的高度还要多！不过，我推荐两者。

Answer 3

我解决了这个问题，为正常样式编写规则..

给你。。

http://jsfiddle.net/wyzqV/

这是我使用的 css

input[type=text] {
      font-family: courier;
      font-size:   80%; 
      padding:     0px;

      margin: 5px;
      width: 167px;
      height: 22px;

   } 

.normal { 
      border: 1px solid #ccc; 
      font-family: courier;
      font-size:   80%; 
      padding:     0px;

      margin:0px;
    width: 168px;
      height: 23px;
   } 

   .input_error_required { 
      border: 1px solid red; 
      font-family: courier;
      font-size:   80%; 
      padding:     0px;

      margin:0px;
    width: 168px;
      height: 23px;
   } 

   .input_error_unique { 
      border: 1px solid orange; 
      font-family: courier;
      font-size:   80%; 
      padding:     0px;

      margin: 0px;
    width: 168px;
      height: 23px;
   }