[Space] 在windows 微信浏览器中设置不生效

[brianzhang]

tdesign-vue 版本

0.52.0

重现链接

https://tdesign.tencent.com/vue/components/space

重现步骤

将重现链接在windows微信浏览器中打开即可看到效果

期望结果

能够正常使用组件实现间距设置效果

实际结果

微信浏览器中无法设置间距效果

框架版本

vue 2.0

浏览器版本

Chrome/81.0.4044.138

系统版本

windows

Node版本

No response

补充说明

5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36 NetType/WIFI MicroMessenger/7.0.20.1781(0x6700143B) WindowsWechat(0x6308010d)

[github-actions]

👋 @brianzhang，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[github-actions]

♥️ 有劳 @HQ-Lin 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @brianzhang 。

[LTMana]

360极速版浏览器上也有这个问题，我看了好像是flex gap浏览器支持的问题，是否可以添加polyfill解决这个问题

[mdxiaohu]

@uyarn 搜狗浏览器也有这个问题，辛苦下解决下

[chaishi]

今天尝试了一下，微信的浏览器（微信版本号 3.9.7.29），表现正常

下了个 360 极速浏览器，看起来也正常

[chaishi]

@mdxiaohu @LTMana @brianzhang
请大家留下间距无法正常显示的 UA 信息（navigator.userAgent），以便进行兼容处理

[chaishi]

Vue2 published at v1.8.0
Vue3 published at v1.7.0

[mdxiaohu]

这是已经兼容了么。没搞明白。
低版本浏览器之前试了下是不兼容的。
原因就是flex的gap属性低版本浏览器支持的问题。

[uyarn]

这是已经兼容了么。没搞明白。 低版本浏览器之前试了下是不兼容的。 原因就是flex的gap属性低版本浏览器支持的问题。

是的 低版本浏览器改了实现方式 不依赖gap

[Julone]

这个处理方式还存在问题，t-space--polyfill不应该设置为flex，应该为inline-flex。大部分的使用场景，space都是紧跟着元素，不应该处理成单独一行。或者说判断一下 是否支持gap再决定使用,目前统一都开启会有问题:
这样子当父节点设置样式text-align:right, 就会失效了。

调整后就是对的了。

@chaishi

[chaishi]

大部分的使用场景，“space都是紧跟着元素，不应该处理成单独一行”

这句话有待考证，我们的系统里面，很多时候都是需要单独一行的，达到 90%。比如 Card 里面的 actions 区域，一定是单独一行。紧着元素的，极其少，不是大部分。

@Julone 看上去你说的“问题” 是：
“是否默认换行（默认块级元素，还是行内元素）”，这似乎不是一个问题了。可以根据自己的情况，自由调整最外层的样式

[theozhang32]

@Julone 看上去你说的“问题” 是： “是否默认换行（默认块级元素，还是行内元素）”，这似乎不是一个问题了。可以根据自己的情况，自由调整最外层的样式

虽然可以自由调整外层样式，但.t-space默认样式就是inline-flex，不应该因为polyfill的引入导致默认行为的改变（引入polyfill，默认就变成flex了）