为何两个input的高度不一样？

Question

    <div id="search">
        <input class="left" type="text" />
        <input class="search_btn" type="submit" value="搜索" />
    </div>
    
*{
  margin:0px;
  padding:0px;
}

#search input.left{
    border:2px solid red;
    height:30px;
    width:420px;
}

#search input.search_btn{
    background:red;
    width:70px;
    height:30px; 
    border:2px solid red;
}

为何左侧的高度要高一些？此时，右侧的上边线比左侧短一点？

现在修改一下css
    *{
  margin:0px;
  padding:0px;
}

#search input.left{
    border:2px solid red;
    height:30px;
    width:420px;
}

#search input.search_btn{
    background:red;
    width:70px;
    height:30px;
    line-height:30px;
    border:2px solid red;
}

左右两侧的上边线一样高了，但是，右侧的下边线又短了一点。

请解释一下？

Answer 1

两个input的box-sizing属性是不应的，submit的默认是border-box，而text是content-box
统一就好了，然后垂直居中调一下，就行了。

input{
  box-sizing:border-box;
  vertical-align:middle;
}

Answer 2

很简单，#search input.left加一句

#search input.left{
    box-sizing: border-box;
}

具体原因可以查一下w3school关于box-sizing的解释，大致就是说不同的DOM浏览器默认的box-sizing不同，导致了计算高度时会有差异，
有些DOM（content-box）没有把边框算进了高度里：渲染高度=设置的高度+边框大小——边框在盒子外延伸出去，
另一些DOM（border-box）已经把边框算进了高度里：渲染高度=设置的高度——边框向盒子内延伸进去

Answer 3

因為型態type不同，一個是text，一個是submit的按鈕，不同元件，瀏覽器展現亦有差別。

見這裡的討論 How can I control the height of text inputs and submit input buttons in different browsers?