fix(pay): 抵消 bootstrap 全局 img max-width 对支付图标的钳制

AKSRT 的 bootstrap.min.css 将 BS3 .img-responsive 选择器组误并入了裸
img(img{display:block;max-width:100%;height:auto};Zibll 的裸 img 不
在该组),导致 flex 压缩场景下 max-width:100% 把支付方式图标钳制到被
压窄的项宽——上一轮的 flex:none 防不住 max-width,5 渠道时图标仍可
被压成细条。

- .payment-method-radio img 显式还原 width:auto + max-width:none
  (连同上一轮 flex:none,图标在任何压缩场景恒为固有比例宽)
- 契约测试改为提取规则块逐属性断言(原正则被规则内注释的右花括号
  截断)
- 无头 Chrome 真实加载组合(bootstrap+main)实测:5 渠道 400px 弹窗
  图标 35x35、项宽 112-183px,无任何挤压
This commit is contained in:
2026-09-18 18:18:31 +08:00
parent e9dd928859
commit be07db3409
3 changed files with 17 additions and 3 deletions
+7
View File
@@ -5695,6 +5695,13 @@ body:has(.modal.in) .float-btn,
.payment-method-radio img {
height: 35px;
/* 抵消 bootstrap 全局 img{display:block;max-width:100%;height:auto}
(AKSRT bootstrap 将 BS3 .img-responsive 选择器组误并入了裸 img,
Zibll 的裸 img 不在该组):flex 压缩时 max-width:100% 会把图标
钳制到被压窄的项宽(实测 5 渠道 400px 弹窗图标被压成 16x35 细
条),flex:none 防不住 max-width,必须显式还原。 */
width: auto;
max-width: none;
/* 多渠道窄容器时禁止 flex 压缩图标导致变形(参考主题同场景存在
此缺陷,实测 6 渠道 360px 容器图标被压至 31px;flex:none 后图标
恒为 35px,行溢出由方法行 hh 换行承接,正常场景视觉不变)。 */
+1 -1
View File
File diff suppressed because one or more lines are too long
@@ -204,8 +204,15 @@ test('核销订单契约:金额恒为 0,订单名称按 note 生成', () =>
test('多渠道防挤压:图标 flex:none + 方法行 hh 换行(三弹窗一致)', () => {
// 图标禁用 flex 压缩(参考主题同场景存在变形缺陷,实测 6 渠道 360px
// 容器图标被压至 31px、宽形 stripe 被压成 35px 方形)。
assert.match(mainCss, /\.payment-method-radio img \{[^}]*height:\s*35px;[^}]*flex:\s*none;/s);
// 容器图标被压至 31px、宽形 stripe 被压成 35px 方形);并抵消 AKSRT
// bootstrap 全局 img{max-width:100%}(flex 压缩时把图标钳制到被压窄
// 的项宽,实测 5 渠道 400px 弹窗图标被压成 16px 细条)。
const rule = mainCss.match(/\.payment-method-radio img \{[\s\S]*?\n\}/);
assert.ok(rule, 'main.css 应存在 .payment-method-radio img 规则块');
assert.match(rule[0], /height:\s*35px;/);
assert.match(rule[0], /width:\s*auto;/);
assert.match(rule[0], /max-width:\s*none;/);
assert.match(rule[0], /flex:\s*none;/);
// 方法行启用 hh 换行(.flex.hh{flex-wrap:wrap}),放不下时整行换行。
assert.match(wallet, /class="flex hh mb10"/);
assert.match(creditsRenderer, /class="flex hh mb10"/);