CSS：提交按鈕的背景圖片

Question

我已使用自定義背景圖片設置了提交按鈕的樣式。 但是在不同的瀏覽器上顯示卻有所不同。

幾乎所有瀏覽器都顯示正確：

但是在2上它有額外的高度：

誰能指出我的標記有什么問題？

CSS：

input[type="submit"]{
    background: url(http://dl.dropbox.com/u/17055243/icons.png) -99px 0px  no-repeat;
    width:30px;
    height:30px;
    border:none;
    float:left;
    margin:30px 0 0;
    cursor:pointer;
}

HTML：

<form>
    <input type="text" class="placeholder" value="Search" />
    <input type="submit" value="" />
</form>

經過測試：

• IE 8.0 不錯
• IE 7.0 不錯
• iPhone 好
• Chrome 24.0 不錯
• Firefox 18.0.2 不錯
• Safari 5.1（Mac OS X 10.7.1） 不錯
• Opera 12.14（Windows 7 32位） 良好
• Safari 5.1.7（Windows 7 32位） 額外的高度
• Opera 11.51（Mac OS X 10.7.1） 額外的高度

jsfiddle上的實時演示 。

Answer 1

在我看來，文本框的高度與提交按鈕不同。 嘗試設置文本框的高度。

Answer 2

我在第二個搜索欄中看到文本為斜體，看起來略小。 我認為搜索欄正在適應文本並使其變小，從而使搜索圖標顯得更大。

您可能需要做的是將其添加到您的樣式表中，以控制占位符：

{font-style:normal}

Answer 3

嘗試這個。 它將為元素提供固定的高度。

input[type="text"]{
    margin:30px 0 0;
    width:226px;
    color:#999999;
    font-size:12px;
    font-style:italic;
    border:1px solid #cccccc;
    border-right:none;
    background-color:#ededed;
    float:left;
    height:28px;
    padding-right: 7px;
    padding-left: 7px;
    line-height: 28px;
}

Answer 4

提交按鈕和輸入文本字段的邊框，邊距，內邊距等具有不同的默認值。首先，您必須將其同時提交到提交按鈕和文本字段中

margin:0;
padding: 0;
border: none;
outline: none;