回复按钮的大小受文本大小偏好的影响

继续讨论 Meta 上的新主题控件

我认为

使所有按钮字体大小相同
的一部分
在所有情况下都不起作用。

我在偏好设置中选择了一个较小的文本大小,这似乎会影响回复按钮的大小。它比其他按钮小。有趣的是,当我选择较大的字体大小时,它不会变大。

6 个赞

我的尺寸正常,但也看到了这个问题。

1 个赞

你好 @Moin 感谢你的反馈,我们的设计师已经知晓但尚未找到解决方案,你有什么解决办法吗?

这是否是移动设备上主题的底部?
也许它受到桌面/平板电脑上“回复”文本大小的影响,而移动设备上看不到“回复”。

我认为回复按钮的大小合适,而左侧的按钮则不合适。

与其他 .topic-footer-main-buttons 区域的按钮不同,主题通知按钮被一个 div 包裹(.topic-notifications-button)。

该区域的所有按钮,包括回复按钮(简化代码):

<button></button>

通知按钮(简化代码):

<div class="topic-notifications-button">
  <button></button>
</div>

问题在于,由于这一行:

font-size: var(--font-up-1) 属性同时应用于通知按钮的包裹元素 内部的按钮。
正如你所知,em 值会从父级到子级逐级累加。
结果可以说明如下:

<div class="topic-notifications-button" style="font-size: 1.15em;">
  <button style="font-size: 1.15em;"></button>
</div>

1.15 × 1.15 就是问题所在。通知按钮 <button> 元素的 font-size 的最终值比预期要大。

乍一看并不明显,因为同级的按钮(扳手、分享、书签等)会调整它们的高度以适应同一 [^1] 上最高的元素,所以主题通知按钮不会显得“太高”,因为该容器中的所有按钮高度都相同。

[^1]:如果我们在此容器中添加几个额外的按钮以使内容换行,可以说明这一点:



第一行的按钮都获得了预期的尺寸。

然而,由于 em 的累加,通知按钮比预期要大,导致同一行相邻的按钮自动增加高度。

删除上面 GitHub onebox 中高亮显示的那一行应该可以解决问题:

7 个赞

非常感谢你的调试,我会把这个转交给我们的设计师 :hugs:

3 个赞

我早就知道是通知按钮导致了问题,但还没确定下来,所以,哇,这发现真棒!我差点忽略了那里应用了双em!还没验证,但很有可能是这样。

谢谢!:clap:

6 个赞

这应该会被修复 (PR)

2 个赞

在置顶主题(例如 Share your feedback about the 🆕 iOS Discourse Hub app

2 个赞

:pushpin: 选定工具包中 SVG 图标旁边的不可见文本 \u0026ZeroWidthSpace; 会增加按钮的高度。任何按钮中的文本都会以同样的方式增加其高度(并且相邻按钮会相应地调整其高度,就像上面讨论的行为一样)。

是的,我会就此开设一个内部讨论主题。我不确定 &ZeroWidthSpace; 引起问题是由于我的更改,还是它一直都是这样而我们现在才注意到。

1 个赞

此主题在 2 天后自动关闭。不再允许回复。