每个月都会把一些学习经历发布到社区,好久没逛社区,偶然发现了社区发布帖子板块的一个前端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>

大佬，厉害了