移动端页面 - 阿里Icon会增大上下间距

问题描述

问 题

如下图，使用图标的时候，会有撑开的间距。
实际的图标位置与可见图标位置不一样。
不管是使用mzui还是mui，都会有此问题。
查样式，暂时没有找出是什么问题。之前使用图标的时候也没遇到这样的问题。
有谁知道这是怎么了吗？是兼容问题吗？谢谢！

解决方案

这个可能是因为你同时使用了mui-icon和iconfont样式的缘故。
这两种图标机制是不一样的，从你截图里可以看见，mui-icon是靠span标签里的内容显示出来的图标，所以它给了span标签24px的宽和高。

而iconfont则是另一种图标机制，它通过修改元素的:before伪元素，来对元素附加图标，所以这两个图标类型只需要留一个即可。

另外，iconfont如果不加上图标名iconfont-xxx，图标附加是无效的。

不过，我看了下CSS样式中那个24px的宽和高的产生条件，貌似是因为被嵌套在了.mui-bar-tab .mui-tab-item里面的缘故，可以尝试手动去掉width和height。

这篇关于移动端页面 - 阿里Icon会增大上下间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！