问题：

当我们设置文字垂直居中时，一般会设置line-heigh于box的高度一致，这是我们很难看出有什么差别。当我们设置icon和文字同时上下居中时，同样的line-height，会发现ios和Android显示不一致，Android会显得偏高

原因：

这个问题通过css是无法解决的，即使解决了也是一种通过微调来实现的hack方法，因为文字在content-area内部渲染的时候已经偏移了，而css的居中方案都是控制的整个content-area的居中。导致这个问题的本质原因可能是Android在排版计算的时候参考了primyfont字体的相关属性（即HHead Ascent、HHead Descent等），而primyfont的查找是看font-family里哪个字体在fonts.xml里第一个匹配上，而原生Android下中文字体是没有family name的，导致匹配上的始终不是中文字体，所以解决这个问题就要在font-family里显式申明中文，或者通过什么方法保证所有字符都fallback到中文字体。

解决方法

1.针对Android 7.0+设备：

1.1`<html>`上设置 lang 属性：

<html lang="zh-cmn-Hans">，同时font-family不指定英文，如 font-family: sans-serif 。这个方法是利用了浏览器的字体fallback机制，让英文也使用中文字体来展示，blink早期的内核在fallback机制上存在问题，Android 7.0+才能ok，早期的内核下会导致英文fallback到Noto Sans Myanmar，这个字体非常丑。

1.2 在需要的标签上设置lang

 <div lang="zh-cmn-Hans"></div>

2.针对MIUI 8.0+设备：

设置 font-family: miui 。这个方案就是显式申明中文的方案，MIUI在8.0+上内置了小米兰亭，同时在fonts.xml里给这个字体指定了family name：miui，所以我们可以直接设置。

3.奇数导致（不一定有效）

因为行高或字体大小是奇数导致的

参考：
作者：周祺
链接：https://www.zhihu.com/question/39516424/answer/274374076

同样line-height下ios和Android显示不一致的问题相关推荐

iOS 和 Android：UITableView与RecycleView的重用机制比较
引言:iOS和Android各有自己的列表组件.众所周知,列表组件一直都是移动端各个端中,组件重用.内存优化的重点.今天就来分析下iOS和Android各自的重用机制. Android:Recycle ...
android ios调试工具,Android Studio显示多个window和iOS模拟器显示RN调试工具
开发过程中,用Android Studio调试多个项目时,在File->Open后,打开的新项目A会替换掉打开的项目B.如果要项目A和B的项目同时显示在不同的window下,需要对Android ...
服务器接收ios图片无法显示,IOS下图片不能显示问题的解决办法
最近在写H5的时候遇到这么一个问题,就是在页面上使用img标签放一张图片在IOS系统下的浏览器都不显示(其实是存在这张图片了,只是是一块白的,长按还可以下载图片)(纠正一下:就简单放一张图片上去,IO ...
切图iOS和android区别,用sketch也要画iOS和android两套吗|Sketch如何用一套设计稿做iOS和Android两个版本 - PS下...
很多Sketch 新手刚进入接触UI设计的时候,不知道如何用一套设计稿来处理IOP和安卓两个系统的图,那么如何用一套设计稿较快速地做 iOS 和 Android 两个版本 app?是不是要做两套呢?然 ...
实现Android下的FPS实时显示工具
原文地址:http://blog.csdn.net/ariesjzj/article/details/10428435 FPS是图形性能的主要指标之一,Android中的一些应用有显示FPS的功能,如 ...
iOS下border一半不显示问题
如图区域, 1.在做点击评价的时候,刚开始遇到下边选择标签左边border显示不全(仅在iOS下电脑和安卓显示完全正常), 解决方法:没有写宽高,使用padding将内容撑开,解决 2.又一次遇到问题 ...
html5图片上传时IOS和Android均显示摄像头拍照和图片选择
最近在做信开发时,发现<input type="file" />在IOS中可以拍照或从照片图库选择,而Android系统则显示资源管理器,无拍照选项,网上查找资料 ...
mac环境下node.js和phonegap/cordova创建ios和android应用
mac环境下node.js和phonegap/cordova创建ios和android应用一介布衣 2015-01-12 nodejs 6888 分享到:QQ空间新浪微博腾讯微博人人网微信 ...
UE4 Windows环境下游戏打包基础教程（ios, windows, android）(UFE方式以及命令行方式)
文章目录环境配置一些会用到的路径 UFE打包 Windows Android IOS 命令行打包注意事项 CMD指令参数介绍值得一看的参考环境 Windows10 虚幻4.23.1 配置 ...

同样line-height下ios和Android显示不一致的问题

问题：

原因：

解决方法

1.针对Android 7.0+设备：

1.1`<html>`上设置 lang 属性：

1.2 在需要的标签上设置lang

2.针对MIUI 8.0+设备：

3.奇数导致（不一定有效）

同样line-height下ios和Android显示不一致的问题相关推荐

最新文章

热门文章

同样line-height下ios和Android显示不一致的问题

问题：

原因：

解决方法

1.针对Android 7.0+设备：

1.1<html>上设置 lang 属性：

1.2 在需要的标签上设置lang

2.针对MIUI 8.0+设备：

3.奇数导致（不一定有效）

同样line-height下ios和Android显示不一致的问题相关推荐

最新文章

热门文章

1.1`<html>`上设置 lang 属性：