爲什麼在使用自定義圖形時在Chrome/Firefox中獲得不同的提交按鈕位置？

我有2個輸入...一個文本字段和一個提交按鈕。我通過CSS使用自定義背景圖像。圖像的高度都是18px。在Chrome中，按鈕的顯示略低於文本字段。在Firefox中，它是點亮的。爲什麼在使用自定義圖形時在Chrome/Firefox中獲得不同的提交按鈕位置？

我使用的CSS是：

.search-field {background: url('search-field.png') no-repeat transparent!important; width: 117px!important; height: 18px!important; border: none!important; margin-right: -7px!important; } 

.search-button {background: url('search-button.png') no-repeat transparent!important; width: 16px!important; height: 18px!important; border: none!important; text-indent: -9999!important; text-transform: capitalize!important;}

我使用的HTML是：

<div class="search"> 

    <input class="search-field" type="text" /> 
    <input class="search-button" type="submit" value="" /> 

</div>

下面的截圖是從Chrome中。在調整了字段的CSS後，我似乎可以在Chrome中更正它，但是在FF中以相反的方式打破。

Chrome Screenshot

來源

2012-02-17 binaryorganic

能否請您提供您的HTML＆的它是做什麼的截圖？你有沒有看過檢查器，看看是什麼造成的？ – 2012-02-17 04:59:59

從Chrome更新了帶有HTML /屏幕截圖的問題。我不確定到底是什麼造成的。我可以在Chrome中修復一個位置：relative和top：-4px;但是在FF中以相反的方式打破它。 – binaryorganic 2012-02-17 13:04:55

希望這有助於..檢查小提琴.. http://jsfiddle.net/mvivekc/XNNAW/

來源

2012-02-17 13:14:07

哇！謝謝！這固定在兩個瀏覽器中。你能解釋發生了什麼，所以我可以理解它嗎？我看到添加的邊框和按鈕的高度變化（以及顯示：塊和浮動），但我仍然沒有得到爲什麼這會糾正問題。如果你找到第二個，並且能夠解釋它，我會非常感激！ – binaryorganic 2012-02-17 14:21:50

爲什麼在使用自定義圖形時在Chrome/Firefox中獲得不同的提交按鈕位置？

回答

相關問題