页面缩放的时候 input 文本框的尺寸发生变化，如何解决

我今天写了一个页面，有一个输入框旁边是一个提交按钮
但是进行页面缩放的时候这个输入框的大小会发生变化 一会是172px 一会是178px或者其他
有时候直接把旁边的提交按钮挤换行了。
这是怎么个情况。
html:

              <div id="search">
                <form action="xxx">
                    <input id="search_text" type="text" placeholder="搜索">
                    <input id="search_submit" type="submit" value="搜索">
                </form>
            </div>

css样式:
#left_content > #search input{
height: 30px;
vertical-align:top;
padding: 0;
margin-top: 10px;
box-sizing: border-box;
}

#left_content > #search #search_text{
margin-left: 10px;
padding-left: 5px;
}

#left_content > #search #search_submit{
width: 80px;
margin-left: 5px;
}
没有js

你把box-sizing: border-box;注释掉