fix(payment): 排序箭头改为基线锚定,修正表头箭头相对文字偏下
.orderby-but 从「无尺寸 inline 宿主 + 依赖绝对定位静态位置 + 固定 translateY(-3px)/6px」改为「零尺寸 inline-block 宿主 + bottom 锚定 + translateY(50%)」。 原理:空 inline-block 的基线即其下边缘,会与同行文字基线对齐,于是箭头盒可用 bottom 精确锚定到「基线以上 N em」;translateY(50%) 抵消箭头自身高度,使盒中心恒等于 bottom 值, 与 dashicons 盒高无关。两枚箭头中心分别落在基线以上 .725em / .075em,对称于文字视觉中心。 旧写法的问题:绝对定位元素未指定 top/bottom 时,其位置来自静态位置(容器内容盒顶部), 该值与表头字体/行高联动;在真实后台 CJK 字体度量下整体偏下。 量测(无头 Chrome + 真实 wp-admin common.css/list-tables.css + 真实表头标记): - 旧写法:箭头簇中心相对文字中心 +2.0px(复现用户反馈的「偏下一点」) - 新写法:-0.09px;两箭头相对文字中心 -4.64 / +4.46,居中对称 - 表头行高两版均为 36.59px,无行高副作用 契约测试同步收紧:断言 bottom 锚定写法,并禁止回归到无 bottom 的固定像素位移。
This commit is contained in:
@@ -1031,12 +1031,15 @@ class PayChargeCards {
|
||||
<style>
|
||||
.order-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-top: 8px; }
|
||||
.order-header .subsubsub { margin: 6px 0; }
|
||||
/* 排序箭头:容器必须保持 inline(不要设 display / margin)。
|
||||
箭头是绝对定位元素,其静态位置取自容器的行盒顶部;容器一旦变成零高度的 inline-block,
|
||||
基线会退化为自身下边缘并与文字基线对齐,箭头整体下沉一个字高、脱离表头文字。 */
|
||||
.orderby-but { position: relative; }
|
||||
.orderby-but > a { opacity: .4; position: absolute; transform: translateY(-3px); transition: .3s; padding-right: 1em; }
|
||||
.orderby-but > a + a { transform: translateY(6px); }
|
||||
/* 排序箭头对齐:宿主做成零尺寸 inline-block —— 空 inline-block 的基线即其下边缘,
|
||||
会与文字基线对齐,于是箭头可用 bottom 精确锚定到「基线以上 N em」。
|
||||
箭头盒中心等于 bottom 值(translateY(50%) 抵消自身高度,与盒子高度无关):
|
||||
两枚中心分别落在基线以上 .725em / .075em,对称于文字视觉中心(约 .4em)。
|
||||
不要改回「无尺寸 inline 宿主 + 依赖静态位置 + 固定 -3px/+6px」的写法:
|
||||
静态位置随表头字体/字号变化,会让整组箭头相对文字偏下(历史缺陷,已量测确认偏下 2px)。 */
|
||||
.orderby-but { display: inline-block; position: relative; width: 0; height: 0; }
|
||||
.orderby-but > a { opacity: .4; position: absolute; left: 0; bottom: .725em; transform: translateY(50%); transition: opacity .3s; padding-right: 1em; }
|
||||
.orderby-but > a + a { bottom: .075em; }
|
||||
.orderby-but:hover a { opacity: .6; }
|
||||
.orderby-but > a:hover { opacity: 1; }
|
||||
.aksrt-btnset { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
|
||||
Reference in New Issue
Block a user