Chrome搜索输入宽度与文字输入

Question

在Firefox文本和搜索输入类型中，两者的宽度都相同。

在Chrome中，它们的宽度不同。

有趣的是，我的Codepen http://codepen.io/rachelreveley/pen/eBpyzK与我的实际代码有相反的结果（搜索显得更宽）。

＆＃13;

＆＃13;

input {
  width: 100%; 
  padding: 1rem;
  box-sizing: padding-box !important;
}

form {width: 500px;}

＆＃13;

<form>
	<input type="search" placeholder="Search" />
	<input type="text" placeholder="Text" />
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您不应再使用padding-box：

  

宽度和高度属性包括内容，填充但不包括边框和边距。只有Firefox实现了这个值，它在Firefox 50中被删除了。   https://developer.mozilla.org/en/docs/Web/CSS/box-sizing

但为什么会发生这种情况？

因此，您使用的是不受支持的padding-box，Google Chrome正在使用box-sizing的默认值。 <input type="search">的默认值为border-box。 <input type="text"/>的默认值为content-box。

请参阅此示例（应该看起来像您的示例）：

input {
  width: 100%; 
  padding: 1rem;
}
input[type="search"] {
  box-sizing:border-box; /** default for this input */
}
input[type="text"] {
  box-sizing:content-box; /** default for this input */  
}
form {
  width: 500px;
}

<form>
  <input type="search" placeholder="Search" />
  <input type="text" placeholder="Text" />
</form>

您可以改为使用border-box：

input {
  width: 100%; 
  padding: 1rem;
  box-sizing: border-box;
}
form {
  width: 500px;
}

<form>
  <input type="search" placeholder="Search" />
  <input type="text" placeholder="Text" />
</form>

padding-box和border-box之间的区别？

在border-box上，元素的宽度和高度包括内容，填充和边框，但不包括元素的边距。在padding-box上，宽度和高度包括内容和填充，但不包括边框和边距。

因此，如果您要模拟padding-box，则必须将边框宽度包含在填充中并使用border-box。

您的示例如下所示：

input {
  width: 100%; 
  padding: calc(1rem + 2px);
  box-sizing: border-box;
}
form {
  width: 500px;
}

<form>
  <input type="search" placeholder="Search" />
  <input type="text" placeholder="Text" />
</form>

提示： <input>边框的默认宽度为2px。