vant icon indicating copy to clipboard operation
vant copied to clipboard

Published 20 hours ago • verified publisher icon youzan

[Bug Report] 按钮外层设置padding后外层容器的padding上下宽度不一致

Open extclp opened this issue 2 years ago • 6 comments

重现链接

https://stackblitz.com/edit/vitejs-vite-nmtquh?file=src%2FApp.vue&terminal=dev

Vant 版本

3.5.2

描述一下你遇到的问题。

删掉.van-button__content:before样式后就会正常

重现步骤

.

设备/浏览器

macos, Firefox可以复现 chrome目前无法复现

extclp avatar Jul 14 '22 03:07 extclp

@chenjiahan 没办法复现么

extclp avatar Jul 22 '22 08:07 extclp

还没下 Firefox，一般 Vant 不会对 PC 浏览器做特殊兼容处理

chenjiahan avatar Jul 23 '22 10:07 chenjiahan

@chenjiahan 主要是iOS那边的, Firefox那边能复现而已

extclp avatar Jul 24 '22 06:07 extclp

button 是 inline-block 导致的空字符问题。 父元素设置一下 font-size: 0; 取消父元素的 padding 上面会有一个红边

uTools_1658668316566

JakeLaoyu avatar Jul 24 '22 13:07 JakeLaoyu

还没下 Firefox，一般 Vant 不会对 PC 浏览器做特殊兼容处理

image

chrome也能复现，高度小于34px时候就会出现空隙。

image

看起来是这个伪类元素产生的问题

goo-yyh avatar Jul 25 '22 03:07 goo-yyh

这个伪类是有用的，用于解决 Icon 按钮的对齐问题，目前没什么合适的替代方案

可以试试 @JakeLaoyu 提供的方法

chenjiahan avatar Aug 07 '22 03:08 chenjiahan