代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
input[type="text"] {
width: 240px;
height: 55px;
border: 1px #000 solid;
box-sizing: border-box;
}
input[type="submit"] {
/*position: relative;
top: 1px;*/
width: 50px;
height: 55px;
background-color: #fff;
border: 1px #000 solid;
}
</style>
</head>
<body>
<input type="text">
<input type="submit">
</body>
</html>
submit比text高一个像素。
你的text按钮中设置
box-sizing: border-box;
属性,这个属性导致盒子的大小是由盒子的边框开始计算。而submit按钮没设置这个属性,盒子的大小是由盒子的内容计算。
实际上submit按钮比text高了2px。。
解决方式是把text中的
box-sizing: border-box;
去掉,或者是给submit加上。顺便提一下,盒子的内容不包括盒子的padding值,如果不加
box-sizing: border-box;
属性的话,计算方式是,内容+padding+border