黑马程序员技术交流社区

标题: 来聊聊黑马程序员社区发现的一个bug [打印本页]

作者: zhangbaoqi 时间: 2018-11-18 23:21
标题: 来聊聊黑马程序员社区发现的一个bug
本帖最后由 zhangbaoqi 于 2018-11-18 23:36 编辑

每个月都会把一些学习经历发布到社区,好久没逛社区,偶然发现了社区发布帖子板块的一个前端bug
我们看到第一张图是不是导航栏出现了混乱,第二张图是把bug修复了,出现的原因是因为选中某个li的时候,强行在li标签上价格class a,然后再看.a在F12中没发现在哪里,但是点击li里面嵌套的a标签的时候,就发现a 标签当中其实有一个 margin-bottom属性,要是去掉这个属性之后就恢复正常了,这个属性是做下划线的标签,正是因为margin-bottom这个属性占据空间,所以导致点击某些标签的时候回出现 <ul></ul>里面会 li标签位置不对. 我试着找控制li标签的js文件,但是发现黑马程序员社区的js代码已经被压缩,所以无法定位到出现问题的js在那个地方.

解决方案:
方案一:不能再li里面的a标签通过margin-botton的方式做下划线,我们应该把实现下划线的style放到li标签当中 li可以设置下边的border
方案二:建议使用CSS伪元素(before,after)去实现下划线
方案三:可以使用指定以自定义标签去实现
<li><a><l></l></a></li> l标签就是可以用相对于a做绝对定位,形成下划线
方案四:最low的方式 <li style="list-style-type:none; border-bottom:1px solid red"> dsf</li><br/><hr><u> </u>

1542553610(1).png (97.47 KB, 下载次数: 33)

1542553974(1).png (74.68 KB, 下载次数: 28)

作者: 奔跑者 时间: 2018-11-19 12:38
大佬，厉害了

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2