搜索按钮与背景高度不一致的图像

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

在vertical-align: middle中尝试input[type="image"]。