html - Chrome 搜索输入宽度与文本输入不同

Question

在 Firefox 中，文本和搜索输入类型的宽度似乎相同。

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

有趣的是我的 Codepen http://codepen.io/rachelreveley/pen/eBpyzK结果与我的实际代码相反(搜索范围更广)。

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

form {width: 500px;}

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

Answer 1

你不应该使用 padding-box不再:

The width and height properties include the content, the padding but neither the border, nor the margin. Only Firefox implemented this value, and it was removed in 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。