欢迎光临
我们一直在努力

line-height文字居中以及字体偏上的浏览器兼容问题

本篇文章记录一下line-height在移动端部分浏览器上导致字体偏上或偏下的问题的解决方法

原因一:字体小于12,导致line-height作用有偏差

原因二:可能用到了rem 字体大小是动态变的。导致line-height作用有偏差

我用flex布局解决此问题

<!DOCTYPE html>
<html>
<head>
	<title>demo exame</title>
	<style type="text/css">
		.box{
			position: relative;
			width: 200px;
			height: 50px;
			font-size: 20px;
                        /*line-height: 20px;*/
			background-color: gray;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	</style>
</head>
<body>
	<div class="box">
		文字居中
	</div>
</body>
</html>
赞(0)
未经允许不得转载:自游互动 » line-height文字居中以及字体偏上的浏览器兼容问题
分享到: 更多 (0)

自由技术,自由自在

项目合作联系我们