web端 部分浏览器line-height会有很大偏移？？

图片说明

这个和行高关系不大，这个和内联元素默认基线对齐有关
你可以试试这样写

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            height:50px;
            border:1px solid #f00283;
            font-size:12px;
        }
        span{
            display: inline-block;
            height: 50px;
            vertical-align: middle;
            line-height:50px;
        }
        img{
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="img/mode_03.png">
    <span>这里是标题</span>
</div>
</body>
</html>

图片说明

看看你的代码，这是我这边的效果图
图片说明