From cca7497553b14ae7939e81eeaac95439770c8d10 Mon Sep 17 00:00:00 2001 From: laoyang Date: Tue, 27 Oct 2026 23:11:05 +0800 Subject: [PATCH] =?UTF-8?q?3.2.60=20=E6=AD=A3=E6=96=87=E6=8F=92=E5=9B=BE?= =?UTF-8?q?=E4=B8=8D=E5=90=83=E6=AE=B5=E8=90=BD=E7=BC=A9=E8=BF=9B=20+=20h3?= =?UTF-8?q?/h4=20=E6=8F=90=E5=8D=87=E5=B1=82=E7=BA=A7=E5=8C=BA=E5=88=86?= =?UTF-8?q?=E5=BA=A6=20#28=20#29?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #28 图片左缩进导致右侧溢出正文块 根因是 text-indent 可继承：段落写了 2em（32px），图片若在段落内 就被一起推走；而 max-width:100% 的 100% 是容器内容宽度、不是 缩进后剩余宽度，所以左缩进多少右边就溢出多少，两者永远相等。 🔴 只给 img 清零不够：灯箱把它包进 ， 那个盒子是 inline-block，本身就是参与父级行内排版的主体， 起点照样被推。链接和图片两处都要清。 修法：图片自成一行、左右都不缩进、水平居中；灯箱链接一起块级化。 #29 h3 与正文区分度太低 改前 h3 只有 18px/500，正文 16px/350，只差 2px 字号 + 150 字重， 且无任何装饰。改后： h2 20px/500/左5px蓝条+浅灰底 h3 20px/600/左3px蓝条+底1px细线 h4 17px/600/纯加粗 p 16px/350 两处让路：h3.ar-year（归档页年份，本身在 .content 里，会多出 竖线和第二条底线）、评论区的 h3（不在 .content 内，未受影响，已验）。 验证 · 判据 52/0（真实页面 + 拦截替换新 CSS，桌面 1440 / 手机 390 双端面） · 反证 10/10 注入全被抓到，阴性对照未误报 · CSS 自检 25/0（含浏览器 replaceSync 逐块重插无丢弃） --- assets/css/site.css | 165 ++++++++++++++++++++++++++++++++++++++++++++ style.css | 2 +- 2 files changed, 166 insertions(+), 1 deletion(-) diff --git a/assets/css/site.css b/assets/css/site.css index 543934a..e8e9744 100644 --- a/assets/css/site.css +++ b/assets/css/site.css @@ -20,6 +20,111 @@ text-indent: 2em; } +/* ── 正文插图：不吃段落的首行缩进，自成一行、左右都不缩进（3.2.60 / 工单 #28） + * + * 🔴 为什么必须有这一段：`text-indent` 是**可继承属性**。 + * + * WP 把图片插进段落时，DOM 是 `

` 或 `

`。 + * 图片（或包着它的 ）作为**行内级盒子**落在段落首行 + * ⇒ 继承 32px 缩进，整体右移。 + * 而 `max-width: 100%` 里的 100% 是**包含块（p）的内容宽度**， + * 不是"缩进之后剩下的宽度" ⇒ 图片仍按全宽铺开。 + * + * 结果：左边缩进多少，右边就溢出多少，**二者永远相等**。 + * 线上实测（2022/05/set-font-in-latex）：左缩进 32px、右溢出 32px， + * 正文可绘制区 111~902.33，图片却是 143~934.33。 + * + * ── ⚠️ 只给 img 清零 text-indent 是**不够**的（第一版就这么错）──────── + * + * 实测：`.article .content img{ text-indent:0; display:block }` 之后， + * 图片自己的 computed text-indent 确实是 0px、display 也是 block， + * 但几何仍停在 143（照样偏 32px）。 + * + * CDP `CSS.getMatchedStylesForNode` 抓到的真相： + * WP 会把图片包进 ``（灯箱）， + * 而 lightbox.css 给它设了 `display: inline-block`。 + * **inline-block 盒子的起点同样受父级 text-indent 影响** —— + * 它继承了 p 的 32px，于是整个「链接 + 图片」盒子被推进去 32px。 + * 图片在盒子内部再怎么清零，也改不了盒子自己的起点。 + * + * ⇒ 缩进必须清在**真正参与父级行内排版的那个盒子**上， + * 也就是 a.yang-lb-item / 裸 img 两者都要清。 + * + * 修法： + * ① `text-indent: 0` 切断继承（不改 p 上的规则本身 —— + * 段落首行缩进是站长期望的效果，去掉会改变全站观感）； + * ② `display: block` 自成一行，不参与首行的行内排版； + * ③ 图片用 `margin: … auto` 居中。 + * + * ⚠️ 只看 `.content img`（后代）而不是 `> img`：图片外面常套一层 + * ``（灯箱），直接子元素选择器量不到。 + * + * ⚠️ 对齐类图片用 `:where()` 把特异性降到 0，让 kratos 的 + * `.alignright{float:right}` / `.aligncenter` 等**照常生效**： + * 浮动的图本来就不该吃缩进，也不该被强制成块级居中。 + * `:where()` 是 CSS4，Chrome 88+ / Safari 14+ / Firefox 78+ 支持； + * 更老的浏览器会整条规则失效 —— 退化成"维持现状"，不会更坏。 */ +.article .content img { + text-indent: 0; + display: block; + margin-left: auto; + margin-right: auto; +} + +/* 🔴 灯箱链接：必须一起清零。它是 inline-block，本身就是参与父级 + * 行内排版的盒子 —— 只清 img 无论用，位置由它决定。 + * 见上面实测说明。 */ +.article .content a.yang-lb-item { + text-indent: 0; + display: block; + line-height: 0; + margin-left: auto; + margin-right: auto; +} + +/* 表情图必须保持行内：正文里它是夹在文字中的小图， + * 变 block 会换行、把句子拆断。特异性 (0,2,1) 压过上面那条。 */ +.article .content img.wp-smiley, +.article .content img.emoji { + display: inline; + margin: 0; + vertical-align: middle; + text-indent: 0; +} + +/* 对齐类图片交还给 kratos 的浮动/居中语义（特异性 0，不参与竞争）。 + * 连包裹它的灯箱链接一起处理 —— 否则链接是 block、图片却 float， + * 会空出一整行。 */ +:where(.article .content) img.alignright { + display: inline; + float: right; + margin: 0 0 8px 16px; +} + +:where(.article .content) img.alignleft { + display: inline; + float: left; + margin: 0 16px 8px 0; +} + +:where(.article .content) img.aligncenter { + display: block; + margin-left: auto; + margin-right: auto; +} + +:where(.article .content) a.yang-lb-item:has(img.alignright) { + display: inline; + float: right; + margin: 0; +} + +:where(.article .content) a.yang-lb-item:has(img.alignleft) { + display: inline; + float: left; + margin: 0; +} + /* 正文二级标题：左侧蓝条 + 浅灰底，横向铺满（负 margin 吃掉正文的 16px 内距） */ .k-main .details .article .content h2 { margin: 16px -16px; @@ -30,6 +135,66 @@ line-height: 41px; } +/* ── 正文三级标题：左侧细竖线 + 底部细线（3.2.60 / 工单 #29） + * + * 改之前 h3 只有 `font-size:18px; font-weight:500`，没有任何装饰， + * 而正文是 16px/350 —— **只差 2px 字号、150 字重**，放在长文里根本分不出来。 + * 对比之下 h2 有蓝条+灰底，越显得 h3 就是"一段稍微粗一点的字"。 + * + * 层级梯度（改后）： + * h2 20px / 500 / 左 5px 蓝条 + 浅灰底 ← 最重，分节 + * h3 20px / 600 / 左 3px 蓝条 + 底 1px 细线，无底色 + * h4 17px / 600 / 纯加粗 + * p 16px / 350 + * + * 为什么 h3 竖线用 3px 而不是 h2 的 5px：同族但更轻，一眼能看出次一级。 + * 为什么 h3 不加底色：h2 已经有灰底，h3 再铺一层整篇会碎成一块块。 + * + * ⚠️ 特异性必须是 (0,4,1) 起步、并把字号/字重一起写死： + * kratos 的 `.k-main .details .article .content h3` 是 (0,4,1)， + * 只写 `.article .content h3`（0,2,1）会被它压掉 —— 这在本项目 + * 踩过一次（archives.css 里 22px/700 写了两版都没生效，实际一直是 18px/500）。 + * 所以这里与 h2 用同一套前缀，并且 font-size / font-weight 都显式声明。 */ +.k-main .details .article .content h3 { + margin: 24px 0 16px; + padding: 2px 0 2px 10px; + border-left: 3px solid #00a2ff; + border-bottom: 1px solid #eaedf2; + font-size: 20px; + font-weight: 600; + line-height: 32px; +} + +/* ── 正文四级标题：17px / 600（工单 #29） + * + * h3 涨到 20px 后，h4 若还是 16px 会跟正文挤在一起、层级断层， + * 所以同步上调到 17px 并加重字重。不加任何装饰 —— 到第四级 + * 再加线就会满屏都是线。 */ +.k-main .details .article .content h4 { + margin: 20px 0 12px; + font-size: 17px; + font-weight: 600; + line-height: 30px; +} + +/* 🔴 归档页的年份标题也是 `

`，而且它就在 + * `.article .content` 里面（[Archives] 是正文短代码）。 + * 上面那条 h3 会命中它 —— 于是年份会多出一条左竖线和一条底细线， + * 而 archives.css 里 `.ar-head` 已经有自己的底边线，会变成**两条线**。 + * + * 这不是"顺手加个补丁"，是必须的：archives.css 的 `.ar-year` + * 靠 (0,5,0) 才压过 kratos，本文件若也用 (0,5,0) 且排在它后面， + * 谁赢就变成"看入队顺序"，非常脆。 + * + * 这里主动让路：把 ar-year 的装饰清零，尺寸仍交给 archives.css 管 + * （它写 26px/700，本规则不碰字号，避免两边抢）。 */ +.k-main .details .article .content h3.ar-year { + padding: 0; + border-left: 0; + border-bottom: 0; + margin: 0; +} + /* 列表缩进与行距 */ ul { margin-left: 2em; diff --git a/style.css b/style.css index 32779a9..e9ec8c2 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,7 @@ /* Theme Name: Kratos_Yang Text Domain: kratos_Yang -Version: 3.2.59 +Version: 3.2.60 Requires PHP: 7.0 Description: 这是一个Kratos主题的分支版本，用来增加一些定制化功能。 Tags: 博客, 双栏, 响应式, 自定义背景, 自定义颜色, 自定义图标, 自定义菜单, 特色图像, 收录优化, 邮件中心, 主题选项, 小工具, 文章置顶, 无障碍友好