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> 
 
\t <input type="search" placeholder="Search" /> 
 
\t <input type="text" placeholder="Text" /> 
 
</form>

Answer 1

你不應該使用padding-box了：

width和height屬性包括內容，填充但無論是邊境，也不是保證金。只有火狐實現了這個值，並且它在Firefox 50 https://developer.mozilla.org/en/docs/Web/CSS/box-sizing

刪除，但爲什麼會出現這種情況？

因此，您使用的是不受支持的padding-box，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的。