帶背景高度不一致圖像的搜索按鈕

Question

我用一個圖像作爲背景的按鈕製作了一個搜索欄。我真的無法讓按鈕和搜索欄在所有瀏覽器和設備上保持相同的高度。

我HMTL：

<form action="test.php"> 
          <input type="search" placeholder="Indiquer un département..."> 
          <input type="image" name="search" src="./img/loupe.png"> 
         </form> 

我的CSS：

.search form input[type=search] { 
    position: relative; 
    left: 1.8em; 
    width: 65%; 
    padding: 0.87em; 
    margin-top: 3em; 
    background-color: #ffffff; 
    float: left; 
    -webkit-appearance: none 
} 

.search form input[type=search]:hover { 
    border: 1px #a1a1a1 solid; 
} 

.search form input[type="image"] { 
    height: 1.96em; 
    display: inline-block; 
    position: relative; 
    padding: 0.5em 20px; 
    left: 1.8em; 
    margin-top: 3em; 
    background-color: #4689f5; 
    color: #ffffff; 
    border: 1px #2f78eb solid; 
    cursor: pointer; 
    -webkit-appearance: none; 
} 

.search form input[type="image"]:hover { 
    background-color: #367ae8; 
    border: 1px #2d59b5 solid; 
} 

謝謝。

Answer 1

在input[type="image"]中嘗試vertical-align: middle。