爲什麼文本輸入有額外的填充？

我試圖覆蓋<input type="text">上的文本（對於跨瀏覽器placeholder的支持）。我發現我的位置總是偏離幾個像素，因爲某些填充不能通過設置padding: 0;來消除。建議here和here不能解決問題。爲什麼文本輸入有額外的填充？

你可以看到這個填充在Chrome之外下面的截圖，如藍色的亮點和黃色邊框之間的空白：

enter image description here

我如何能）刪除此空間;或b）使用Javascript來衡量它？

2013-08-24 1' '

您是否嘗試過CSS重置？ – j08691

如果你不想處理完全的CSS重置（在幾乎所有的情況下都是不必要的），你應該考慮使用類似[Normalize.css]（http://necolas.github.io/normalize.css/）的東西，。 – mc10

如果換成你自己的默認邊框，填充消失（至少對我來說，在Chrome/Mac上）：

enter image description here

這是我使用的CSS：

input { 
    padding: 0; 
    outline: none; 
    border: 1px solid red; 
}

2013-08-24 22:28:04 bfavaretto

這適用於Chrome 29.0.1547.57中的我。原因在於Chrome默認使用了2像素的邊框，其效果看起來像是一個單像素，固體邊框，其間距爲 –

。這適用於最新版本的Chrome，Firefox（可以開始），Safari以及IE8和9，但不適用於Opera和IE10。任何想法爲什麼？ –

@ 1''您是否重設填充，邊距？你是否嘗試設置邊框盒模型？ – bfavaretto

-1

您需要重置所有內容。所以最好推薦使用：

<style> 
html, body { 

    margin: 0; 
    padding: 0; 

} 
</style>

希望這對我有所幫助。

2013-08-24 22:26:23 Elmer

這不起作用，雖然它通常是這樣的問題的一個很好的解決方案。 –

回答