关于span高度的问题

1.最近在看看CSS的代码,发现微信菜单设置的一段代码,但是一直没有明白为啥span的高度能够被撑开

clipboard.png

2.

<li class="js_addMenuBox"><a href="javascript:void(0);" class="jsSubView js_addL2Btn" title="最多添加5个子菜单" draggable="false"><span class="sub_pre_menu_inner js_sub_pre_menu_inner"><i class="icon14_menu_add"></i></span></a></li>



chrome F12查看css,其中 的css如下:
clipboard.png

<span class="sub_pre_menu_inner js_sub_pre_menu_inner"></span>的css如下:
clipboard.png

不解的是,span的高度是由什么决定的呢?

clipboard.png

clipboard.png

inline-height在block中能生效吗?

我自己拷贝出这段代码,但是却无法生效?经过测试,拷贝出来的代码中,如果在span中添加文本,则line-height会生效,也就是span高度会撑到44,但是如果没有文本,就会坍塌成14,很好奇为何微信公众号菜单配置页面,span中没有文本内容,44的高度能够支撑?

阅读 6.6k
4 个回答

贴你自己写的代码啊。。。

li的行高,i的高度,影响的,inline-height在block是可以生效的。

高度是外层li标签的line-height撑起来的,45px减去1px边框刚好44px;
宽度是block属性造成的;

最后在一个同事的指点下,发现正确的姿势,就是在html开头增加doctype声明 <!DOCTYPE html>,将文档声明称HTML5.0,就OK了,我还不懂这之间的差异在哪里,可能是< i >的差异,亦或是其他? 后面有时间,专门做个主题测试下。做了简单版本的测试,具体的问题转到链接描述 该问题下

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题