如何解决IOS端两个内联块元素无法上下对齐的问题？

Question

需求是一个简单的搜索框：包括一个输入框和按钮，在PC端宽度较短且固定，在移动端独占一行
PC端和安卓移动端都没有问题，但是在IOS端上下没有对齐，相差1px
IOS端：

安卓端：

Html代码：

<form method="post" action="{:url('Search/index');}" style="display: inline;" onsubmit="return canSearch()">
    <span id="nav-search" >
        <input id="nav-search-input" type="text" placeholder="请输入关键词" name="key"/><input id="nav-search-submit" type="submit" value="搜索" />
    </span>
 </form>

Css样式：

/* 顶部搜索栏 */
#nav-search input[type='text'] {
    box-sizing: border-box;
    display: inline-block;
    height: 30px;
    width: 170px;
    /* line-height: 30px; */

    padding-left: 5px;
    margin-left: 100px;

    border:1px #005164 solid;
 }

#nav-search input[type='submit'] { 
    box-sizing: border-box;
    display: inline-block;
    height: 30px;
    width: 50px;
    /* line-height: 30px; */
    background-color: #005164;
    color: white;

    border:1px #005164 solid;
    /* border:none; */
}

@media screen and (max-width:500px){
        #nav-search input[type='text'] {
        box-sizing: border-box;
        width: 80%;
        margin: 0 0 10px;

        -webkit-appearance: none;
        border-radius: 0;~~~~
    }
     #nav-search input[type='submit'] { 
        box-sizing: border-box;
        width: 18%; 
        margin: 0 0 10px;

        -webkit-appearance: none;
        border-radius: 0;
     }
     /* #nav-search::before {
     display: block;
     content: "";
     height: 0;
     margin: 0;
     } */
}

我尝试的解决方法，都没有用：
1.尝试为两个元素添加box-sizing: border-box;属性
2.尝试为提交按钮input[type='submit']也添加一个一样的边框

最后的解决方法：
使用js检测到当前为IOS设备时，设置提交按钮底部内边距为1px：

$('#nav-search-submit').css('padding-bottom','1px')

请问有没有更好的解决方案？

Answer 1

在#nav-search 加上
display:flex;align-items: center;

不用使用js

Answer 2

vertical-align: middle 呢？

Answer 3

为什么不用float:left

Answer 4

input 添加 vertical-align:middle

Answer 5

float:left 跟 display:box , display:flex 都可以解决.