继续讨论 Meta 上的新主题控件:
我认为
使所有按钮字体大小相同
的一部分
在所有情况下都不起作用。
我在偏好设置中选择了一个较小的文本大小,这似乎会影响回复按钮的大小。它比其他按钮小。有趣的是,当我选择较大的字体大小时,它不会变大。
继续讨论 Meta 上的新主题控件:
我认为
使所有按钮字体大小相同
的一部分
在所有情况下都不起作用。
我在偏好设置中选择了一个较小的文本大小,这似乎会影响回复按钮的大小。它比其他按钮小。有趣的是,当我选择较大的字体大小时,它不会变大。
我的尺寸正常,但也看到了这个问题。
你好 @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 中高亮显示的那一行应该可以解决问题:
非常感谢你的调试,我会把这个转交给我们的设计师 ![]()
我早就知道是通知按钮导致了问题,但还没确定下来,所以,哇,这发现真棒!我差点忽略了那里应用了双em!还没验证,但很有可能是这样。
谢谢!![]()
这应该会被修复 (PR)
选定工具包中 SVG 图标旁边的不可见文本 \u0026ZeroWidthSpace; 会增加按钮的高度。任何按钮中的文本都会以同样的方式增加其高度(并且相邻按钮会相应地调整其高度,就像上面讨论的行为一样)。
是的,我会就此开设一个内部讨论主题。我不确定 ​ 引起问题是由于我的更改,还是它一直都是这样而我们现在才注意到。
此主题在 2 天后自动关闭。不再允许回复。