移动端页面 - 阿里Icon会增大上下间距
本文介绍了移动端页面 - 阿里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屋!
查看全文