极客观点
项目管理
HarmonyOS
问题1：我对input[type=text] button使用了line-height:0; 并没有得到在普通span元素上同样使用0行高所表现的样子，是input,button这类表单元素的什么特性影响了内部文本定位吗？
问题2：在chrome中，input和button在垂直位置上会存在1像素的偏差，如果把vertical-align设置成middle，两者的外框会垂直对齐，但中间的文本垂直会相差1像素（以x的底边先做参考）
想知道这两个问题的本质
图片中红色线条表示文本的baseline对齐，绿色线条表示input和button的1像素差
对于问题1PC端Chrome,firefox,Edge都是如此，问题2则只有Chrome中出现
相关代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>测试元素的垂直对齐</title>
<style type="text/css">
.test{ padding:20px;}
.test>*{ display:inline-block; line-height:0; margin:0; padding:0; border:1px solid #ccc; -webkit-appearance:none; height:100px; background:#eee; box-sizing: border-box; font-size:20px;}
</style></head>
<body>
<div class="test">
<span>测试xyz</span>
<input type="text" value="测试xyz"/>
<button>测试xyz</button>
</div></body>
</html>
我以前遇到过这个问题，在不同的浏览器上，显示的样式就是不一样，我后来就给套了div，就没有这个现象了