老师好，我在做一个悬浮按钮，可按钮中的文字总是和按钮错位，如何解决？

来源：4-5 基于js的websocket相关api介绍

兔子先生

2019-02-20

老师好，我在做一个悬浮按钮，可按钮中的文字总是和按钮错位，如何解决？
----------------------以下为我的源代码，下面还有调试的截图------------------------------------------

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="fontico/iconfont.css">
		
	<style type="text/css">

		.xuanfubutton{
			font-size: 56px;
			bottom: 50px;
			right: 50px;
		}
        .nav-fixed {
            position: fixed;
            bottom: 50px;
			right: 50px;
        }
	</style>
	</head>

	<body>
		
		<div class="mui-content">
			<div id="nav" class="nav-fixed">
				<button class="mui-btn mui-fab mui-btn-danger"><span class="xuanfubutton">+</span></button>
			</div>
		</div>
		
		
		
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>

图片描述