CSS：不一致的輸入標籤的外觀（Firefox和Safari瀏覽器）

我試圖找出爲什麼我輸入標籤看起來在Firefox & Safari瀏覽器相當不均勻看看這張截圖：CSS：不一致的輸入標籤的外觀（Firefox和Safari瀏覽器）

我使用Firebug & Safari開發人員工具瞭解發生了什麼。似乎Firefox爲每個邊框增加了另一個像素，這導致另外4個像素，這使得輸入看起來更大和更煩人。加上文本看起來在Firefox中有點高。是因爲多餘的像素？或者是其他東西？

無論如何，我很想知道爲什麼這些像素是在Firefox中添加的。

#signup-form form input[type="text"], input[type="password"] { 
    height:20px; 
    padding:2px 4px; 
    width:300px; 
    color:#a1a1a1; 
    font-style:italic; 
    display:block; 
    margin:10px 0px 0px 0px 
}

來源

2013-02-24 elad.chen

您使用的代碼在哪裏發生了這一切？否則，您應該意識到輸入元素的樣式與每個瀏覽器和操作系統一樣......換句話說，您必須付出大量的CSS努力才能實現跨瀏覽器呈現一致性。 – Sparky 2013-02-24 16:47:17

您是否嘗試過使用CSS重置？ – j08691 2013-02-24 17:04:27

嗨，是的，我正在使用CSS重置+我的答案現在包括輸入的CSS代碼。 – 2013-02-24 17:05:39

設置border-width: 2px;。元素在瀏覽器和操作系統中的呈現方式不同，這只是Web開發人員必須忍受的事情。表單元素比其他元素更受此限制。

來源

2013-02-24 17:11:03 Dennis

CSS：不一致的輸入標籤的外觀（Firefox和Safari瀏覽器）

回答

相關問題