文本輸入的默認樣式是什麼？

我試圖將輸入更改爲與錨標記完全相同，但由於某種原因，在文本啓動之前左側有一個1/2px的間隙。頂部還有1/2px的間隙。文本輸入的默認樣式是什麼？

任何想法，這些差距來自哪裏？

（我已刪除填充，邊距和邊框）。

在safari和firefox上完全一樣的問題。

來源

2011-09-17 Jai

只是好奇你爲什麼要輸入標籤看起來像一個錨標籤。 –

即時切換標籤和輸入標籤，所以我想定位是相同的。 – Jai

有一個半像素的差距..？ –

這是我能想出的製造<input type="button" />出現在同一個<a>元素的最佳

example jsfiddle

的Safari，Chrome和IE都顯得與下列合作得很好：

input[type="button"], a { 
    margin:0; 
    padding:0; 
    border:0; 
    cursor:pointer; 
    font:12px/15px Helvetica, Arial, sans-serif; 
    color:blue; 
    text-decoration:underline; 
}

但是火狐（我使用的是6.0.1）需要進行一些更多的技巧：

input[type="button"] { 
    line-height:15px!important; 
} 

input[type="button"]::-moz-focus-inner { 
    border:0; 
    padding:0; 
}

這-moz-focus-inner似乎是圍繞元素的額外空間的罪魁禍首，無論border和padding在內部瀏覽器樣式表設置（轉到資源：//gre-resources/forms.css在FF看到樣式表）

也就是說Firefox仍然在文字上方生成了1個額外像素，我無法弄清楚如何刪除，但是當切換按鈕或錨點時，沒有行高變化，意味着父級div沒有改變高度當切換元素時爲1px。

來源

2011-09-17 21:22:06 MikeM

這似乎是我的主要罪魁禍首！ Woops，我不小心將文本對齊設置爲中心，但沒有注意到，因爲空間太小了！不過，我感謝你關於內在焦點的說明，它解決了上面的差距。謝謝！ – Jai

那麼，html元素的默認樣式（如文本輸入）因瀏覽器而異。如果你想在所有的瀏覽器上看起來都一樣，你必須確保在你的css中覆蓋它們。對於每個主流瀏覽器，您都有某種檢查工具，當您右鍵單擊頁面中的某個元素時，它會爲您提供「檢查」選項，該選項可以準確顯示事物的CSS屬性。對於鉻和safari這是建立它。爲Firefox安裝螢火蟲插件。對於ie8 +安裝開發工具欄。

來源

2011-09-17 17:05:22

文本輸入的默認樣式是什麼？

回答

相關問題