移动端适配问题

Question

老师你好
这里因为是使用了路由，所以自己写了下按键切换样式
思路是：

1. 外边父盒子下边框始终是一条灰线
2. 通过按键 margin-bottom:-1px 让下边框重合
3. 通过 vue3 的 router-link-active 给选中的按键下边框改为白色
   出现以下问题：

移动端（ button 下边框无法盖住父盒子的下边框）
PC端正常

Answer 1

张轩 2022-08-05 08:49:41

同学你好 我使用你的代码库，并没有发现你描述的问题，你是修改了吗？请看截图：

实现的话：可以参考 https://element-plus.gitee.io/zh-CN/component/tabs.html#%E5%B8%A6%E6%9C%89%E8%BE%B9%E6%A1%86%E7%9A%84%E5%8D%A1%E7%89%87%E9%A3%8E%E6%A0%BC

它的思路是 所有的item 都是 一像素的透明边框，假如是active，将边框的颜色改变即可，可以研究一下上面的例子。

• 提问者 慕莱坞3345942 #1

  感谢老师，我没有修改，在 Chrome 和 Firefox 都会出现，不同的是随着浏览器缩放比例不同时出现。
  明白老师的意思了，另外想问一下， Element 这个组件 标签下边的长线是如何做的呢

Answer 2

张轩 2022-08-03 22:38:05

同学你好 

能否提供一下你的代码库（git），我明天在本地帮你调试看一看，谢谢～

• 提问者 慕莱坞3345942 #1

  麻烦老师
  https://github.com/10r10y/yifang/blob/main/src/views/EditInformation.vue
  另外问一下，这个是 1px 问题吗？最合适的解决方案是什么呢？

• 提问者 慕莱坞3345942 #2

  有劳老师了
  https://github.com/10r10y/yifang/blob/main/src/views/EditInformation.vue
  另外问一下这个是移动端 1px 问题吗，最合适的解决方案是什么呢