BUG收集

以下收集了在SCP网站（包括中分和英文站）上遇到的关于组件和版式的bug（以及可以改进的功能）。

Wikidot级异常（影响多个甚至全部Wikidot网站）

网址含有“scp”字眼的wikidot网站的标签系统坏了

触发条件：点击任意页面下面的任何标签，进入/system:page-tags/tag/标签名#pages页面

现象：[[module PagesByTag]]不显示。

原因：Wikidot似乎为了优化服务器（减轻服务器开支）给所有scp有关网站下架了这个功能

解决方法：等待Wikidot修复此模块，或者使用ListPage模块代替此功能（但无法显示首行的“页面被标记为：标签”字样）

[[module ListPages category="*" order="title" separate="false" perPage="100" tags="@URL|_"]]
# %%title_linked%%
[[/module]]

是否已解决（截至本文发布）：否。对于替代解决方法，英文站貌似在作者在技术群反馈了之后采取了中分的解决方案，但是其它网站可能仍未修复。

网站级异常（广泛影响某个或者几个SCP网站）

标准插图方块（中分）空白框问题

触发条件：在width=参数里使用百分比。例如：

[[include component:image-block
|name=图片网址
|caption=标题
|width=50%
|align=right
]]

现象：图片右侧（也有可能在左侧，未知）会出现空白区域：

1.png

原因：在CSS长度单位中，百分比不同于其它绝对单位（px、pt、em），它是嵌套的，也就是说，如果有一个div A里套了另一个div B，并且二者的宽度都设置成50%，那最终div A宽度是它外层元素的一半，而div B宽度又会是div A的一半。如果都设定成同一个绝对单位，那么div A和div B的大小将会保持一致。

中分图片块组件代码错误地将参数{$width}传递到了内层图片和下面标题上，导致百分比宽度既应用到整个图片块，也应用到内层图片和下面标题上，所以图片占不满整个宽度，会在一侧留下空白

在中分这个组件的后端里：

[[div class="scp-image-block block-{$align}" style="width:{$width};"]]
[[image {$name} style="width:{$width};" link={$link}]]
[[div class="scp-image-caption" style="width:{$width};"]]
{$caption}
[[/div]]
[[/div]]

可以看到width:{$width};出现了3次。

解决方法：将第二、第三个参数删掉，或者直接跟进英站/日站的现有版本：

[[div class="scp-image-block block-{$align}" style="width:{$width};"]]
[[image {$name} {$alt}="{$alt-text}" link={$link}]]
[[div class="scp-image-caption"]]
{$caption}
[[/div]]
[[/div]]

这里还新增了一个alt参数，是图片的替代文本，用于描述图片内容，对无障碍访问很重要。

是否已解决（截至本文发布）：否，已反馈给站务组，但目前没有修复。

中分（和日分）Sigma-9自定义logo可能在宽屏上变得很大

触发条件：在中分官网（非沙盒），以及日分官网或沙盒上，使用修改#header的背景图的方法自定义页面logo，并且没有通过@media指定页面宽度在979像素以上时的大小。然后在电脑端查看这个页面。

现象：logo会变得非常大，取决于你使用的logo原图大小。

4.png
5.png

这个现象在中分沙盒站不会出现。顺着这个微小的不同，笔者追查了线索，并且最终发现了问题所在。

原因：中分沙盒站采用的Sigma-9版式和中分/日分官网采用的不完全一致。中分沙盒的版式引用的是

@import url('http://scp-wiki-cn.wikidot.com/component:theme/code/1');

这个@import引入的可能是旧版Sigma9，来源https://scp-wiki-cn.wikidot.com/component:theme/code/1 。其中对#header的样式定义是：

/* HEADER */
#header {
    height: 140px;
    position: relative;
    z-index: 10;
    padding-bottom: 22px; /* FOR MENU */
    background: url('https://scp-wiki-cn.wdfiles.com/local--files/component%3Atheme/logo.png') 10px 40px no-repeat;
    background-size: 100px 100px;
}

然而，中分现行的版式代码托管在GitHub上，来源是https://sigma9.scpwikicn.com/cn/cn/sigma9_ch.min.css 。经过Unminify处理，显示出这一段：

#header {
    height: 140px;
    z-index: 10;
    padding-bottom: 22px;
    background: url(https://sigma9.scpwikicn.com/cn/img/logo.png)10px 40px no-repeat;
}

（值得注意的是，这里最后一句还漏了一个空格。）

background-size: 100px 100px;这一句没有了。中分官网的logo目前正常显示的原因是它使用的这张图：

logo.png

本身就恰好是100px x 100px大小。

此问题出现在日分官网和沙盒上也是同样的原因。

解决方法：补齐这个漏洞，或者在你的页面里加入logo尺寸补丁：

@media (min-width: 979px) {
    div#header {
        background-size: 100px 100px;
    }
}

是否已解决（截至本文发布）：否

黑标的个人信息窗口溢出

触发条件：使用黑色标记笔版式；任意用户在个人信息任何一栏（包括“关于”“网站”“真实姓名”等）填入过多信息，然后点击其头像，查看信息窗口。

现象：窗口下面几个按钮严重崩坏，并且文字溢出

2.png

原因：黑标字体较大，重写了窗口按钮的样式，导致窄屏上空间不足；开发时可能没有在移动端做足用户体验测试

解决方法：最好的方法是限制此窗口的最大高度max-height和里面部分的最大宽度max-width。

防止横向溢出只能使用滚动条，和/或把其grid排版由双栏改成单栏。

防止竖向溢出，要么使用Sigma原生的position: relative使得窗口可随页面滚动，这样下面按钮即使被挤到屏幕可见范围以外，往下滑滑也可以点到。（基岩版式的个人信息窗口目前可能是Sigma版式之外做的最整洁好看的。）

/* 修复用户信息窗口溢出 */
 
#odialog-container div.owindow {
    position: relative;
}
 
/* 修复窄屏下用户信息窗口溢出 */
 
@media only screen and (max-width: 56.25rem) {
    #odialog-container div.owindow>div.modal-body>img[style*="padding: 2px 8px;"]:first-child~table {
        overflow: scroll;
        scrollbar-width: thin;
        grid-template-columns: unset;
        max-height: 45vh;
        font-size: 90%;
    }
}
 
@media only screen and (max-width: 300px) {
    #odialog-container div.owindow>div.modal-body>img[style*="padding: 2px 8px;"]:first-child~table {
        max-width: 70vw;
    }
}

是否已解决（截至本文发布）：否，但在作者参与制作的几个黑标版式里已部分修复，例如千尺深蓝 版式。

其它版式（除基岩外）的个人信息窗口溢出

触发条件：同上

现象：文字溢出

s9a.png

原因：窗口元素没有指定合适的overflow属性

解决方法：目前没有非常好的解决方法，可能的方法与上述黑标类似。

是否已解决（截至本文发布）：否，在英文站的建议与政策区发了帖，但目前未得到回应。

个人信息窗口里的“关于”部分无法换行

触发条件：用户在个人信息“关于”一栏输入多行文本，然后点击其头像，查看信息窗口。

现象：换行符会被忽略。对比如下（左：现状，右：理想外观）

s9a.png
s9b.png

原因：窗口元素没有指定合适的white-space属性

解决方法：为信息窗口里的文本指定white-space: pre-wrap属性

.modal-body table td em {
    white-space: pre-wrap;
}

是否已解决（截至本文发布）：否。在上述帖子里提到了，但目前未得到回应。

组件级异常（仅稍微影响使用这些组件的页面）

微信聊天组件和黑标同时使用时文字溢出

触发条件：使用上面提到的黑标和微信聊天组件，且某个气泡中文字少于11个全角字符（汉字）

现象：文字会被挤到气泡外，可能会完全变成竖排

3.png

原因：黑标的normalize.css里有一段：

@supports (display:grid) {
    #page-content div, #page-content div table, embed, iframe, img, object, table, video {
        max-width: inherit;
    }
}

而此组件的样式里又有这一段：

.message {
    max-width: -webkit-calc(100% - 6.5rem) !important;
    max-width: -moz-calc(100% - 6.5rem) !important;
    max-width: calc(100% - 6.5rem) !important;
}

这可能导致了组件里的消息气泡div最小宽度异常。

解决方法：把.message的max-width改成100%。目前尚未发现这么改会出现其它问题。

是否已解决（截至本文发布）：否

身份卡组件的条形码无法扫描

触发条件：使用上述组件，并且填入id-number=序列号（如果要溢出，需要在序列号里填入不少于5个数字）

现象：条形码无法扫描，仅能做装饰用。

6.png

原因：该组件使用的条形码字体是Libre Barcode 128。Code-128是和Code-39完全不同的条形码方案，其要先使用转码器才能把预期的文字转换成能被正确解读的条形码，很明显这个功能无法在Wikidot不可使用JS的前提下实现，而且也没有必要。大部分证件和身份卡都用Code 39条形码足够。

另外，原组件缺少条形码的起始符和终止符（一对**或者{}）。

并且条形码宽度固定（overflow: hidden），而且可能是为了美观起见（觉得占不满不好看），作者把条形码在参数里重复了一次，导致变得更长（比如用户输入序列号12345，它真实显示出来的是1234512345）所以在输入超过5个字符的情况下，右侧会溢出，即使加入了起始和终止符号，终止符也会被截掉，无法扫描。

解决方法：将字体替换成同家族字体Libre Barcode 39，并且把参数里的

[[div_ class="barcode"]]
{$id-number}{$id-number}
[[/div]]

改成

[[div_ class="barcode"]]
*{$id-number}*
[[/div]]

就可以扫描出来了。只要没有溢出被裁切，即使清晰度很低依旧可以识别。

7.png

鉴于此组件是横向排版，不太可能在水平方向上允许条形码把卡片拉长，因此溢出的问题不好解决。笔者因此受它启发设计了一个竖版的身份卡组件。

是否已解决（截至本文发布）：否，在组件原文的评论区回复了，但目前未得到作者回应。

页面版本: 37, 最后编辑于: 18 Nov 2025 10:17
编辑 评分 (0) 标签 讨论 历史记录 附件 打印 网站工具 + 选项
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License