12SSL 已签发证书 IP 列表显示问题分析与修复要求

检查页面

text

https://client.12ssl.com/clientarea.php?action=productdetails&id=21577

页面类型：

text

Client Area / My Products & Services / Details
Multi IP SSL

本文件仅提供问题分析与修复要求。本轮检查没有修改线上文件或业务逻辑。

一、检查结论

页面数据没有丢失。

通过实际页面结构检查，当前证书已经渲染：

49 条 IP 记录。
编号从 1 连续到 49。
每条记录均包含一个编号和一个 IP 地址。

因此，这不是数据库、证书数据或 JavaScript 加载不完整导致的问题，而是 CSS 布局规则错误。

二、直接根因

模块使用同一个 .domainInput 类处理两种完全不同的内容：

证书申请或配置表单。
已签发证书的 SAN/IP 纯展示列表。

两种页面的 DOM 列数不同。

申请表单行

申请表单通常包含：

text

编号 / Domain or IP / DCV Method

部分多域名表单还包含删除操作，因此可能是四列。

已签发证书行

complete.tpl 中的纯展示列表每行只有两个单元格：

html

<tr>
    <td><span class="domainNumber">1</span></td>
    <td><span class="domainValue"></span></td>
</tr>

即：

text

编号 / IP

当前发生的 CSS 冲突

common.css 的通用规则把所有 .domainInput tbody tr 强制定义为三列：

css

#tabOverview .domainInput thead tr,
#tabOverview .domainInput tbody tr {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) minmax(220px, 1fr) !important;
}

后面的已签发证书规则试图改成两列：

css

#tabOverview #sslContent:has(#orderInfoPart)
#domainPart .domainInput tr {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
}

但是这条规则没有覆盖前一条规则中的 !important。

最终结果是：

已签发证书每行只有两个 <td>。
CSS 却仍为每行保留三个 Grid 列。
第三个 Grid 列始终为空。
IP 内容只占中间列，右侧产生无意义空白。
多列外层网格中，每条 IP 的可用宽度被再次压缩。
编号、IP、行分隔线容易出现异常间距或错位。

这是当前显示问题的主要根因。

三、移动端的附加冲突

移动端样式还存在两项会影响已签发证书列表的通用规则。

1. 强制最小宽度

css

#tabOverview #orderInfoPart ~ #domainPart .domainInput table {
    min-width: 720px;
}

该规则适用于需要多个表单字段的申请页面，但不适用于只有“编号 + IP”的完成页。

在手机模式下会导致：

表格宽度超过主内容区。
页面出现横向滚动。
外层卡片或页面被撑宽。

2. 所有数据行强制改为纵向 flex

css

#tabOverview .domainInput tbody tr {
    display: flex !important;
    flex-direction: column !important;
}

该规则会把完成页原本应该在一行显示的：

text

1  104.155.214.161

变成：

text

#1
104.155.214.161

对于 49 条纯展示数据，这会显著增加页面高度，并破坏信息密度。

四、建议的正确修复方法

不要继续使用 :has(#orderInfoPart) 判断页面类型，也不要继续用同一套 .domainInput 行规则兼容两种不同 DOM。

应在 complete.tpl 中增加一个只用于已签发证书列表的语义类。

模板建议

把：

html

<div class="domainInput">
    <table>

改为：

html

<div class="domainInput ssl-issued-domain-list">
    <table class="ssl-issued-domain-table">

这里只增加 class，不改变：

.domainInput 原有类。
表格结构。
.domainNumber。
.domainValue。
JavaScript 选择器。
数据加载逻辑。

因此现有 addDomainTr() 和 initDatas() 不需要修改。

五、已签发 IP 列表桌面端布局

49 条 IP 适合使用紧凑的响应式网格，不适合显示成 49 行单列长表。

建议：

大屏显示 4 列。
普通桌面显示 3 列。
平板显示 2 列。
手机显示 1 列。

每个 IP 项内部只包含两列：

text

编号 / IP

六、响应式规则

建议使用以下明确断点：

css

@media (max-width: 1199.98px) {
    #tabOverview #sslContent .ssl-issued-domain-table tbody {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991.98px) {
    #tabOverview #sslContent .ssl-issued-domain-table tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    #tabOverview #sslContent .ssl-issued-domain-list {
        padding-left: 0;
    }

    #tabOverview #sslContent .ssl-issued-domain-table {
        min-width: 0 !important;
    }

    #tabOverview #sslContent .ssl-issued-domain-table tbody {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #tabOverview #sslContent .ssl-issued-domain-table tbody tr {
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) !important;
        padding: 7px 0 !important;
    }
}

手机模式下必须明确覆盖通用规则中的：

css

min-width: 720px;
display: flex;
flex-direction: column;

完成页的编号和 IP 在手机端仍应保持同一行。

七、应同步收窄通用选择器

目前以下选择器范围过大：

css

#tabOverview .domainInput tbody tr
#tabOverview .domainInput td
#tabOverview #orderInfoPart ~ #domainPart .domainInput table

它们同时命中：

申请表单。
待验证页面。
已签发完成页面。

建议将申请表单规则限定到该表单已有的明确 class，例如：

css

#tabOverview .domainInput.ssl-dcv-table ...
#tabOverview .domainInput.is-multidomain ...

已签发证书规则限定到：

css

#tabOverview .ssl-issued-domain-list ...

不要再依靠规则顺序和多层 !important 互相覆盖。

八、数据顺序

网格应保持 DOM 的自然顺序，采用横向逐行阅读：

text

1   2   3   4
5   6   7   8
9  10  11  12

不要使用 CSS Columns，因为 Columns 会使视觉顺序与 DOM/键盘/屏幕阅读器顺序难以核对。

九、操作按钮位置

下载证书 和 重签证书 应继续位于整个 IP 网格之后，不应进入最后一个 Grid 单元格。

要求：

按钮区域与 IP 表格是兄弟元素。
按钮区域单独占一行。
按钮继续使用现有提交及下载逻辑。
不改变按钮事件绑定和 class。

十、不要采用的方案

不要删除或截断第 10 条以后的 IP。
不要使用 CSS display: none 隐藏多余记录。
不要为 49 条 IP 增加只显示部分记录的前端假分页。
不要把 IP 改成 input；这是纯展示信息。
不要使用胶囊、标签或按钮样式包装 IP。
不要用 JavaScript 重新排序 IP。
不要修改证书数据、数据库或 API 返回值。
不要通过继续增加更高权重的无作用域全局规则临时压制问题。

十一、需要修改的文件

本地文件：

text

/Users/gaofengzhang/Documents/DocsDeploy/whmcs-modules/nicsrs_ssl/view/complete.tpl
/Users/gaofengzhang/Documents/DocsDeploy/whmcs-modules/nicsrs_ssl/view/home/css/common.css

对应远程文件：

text

/home/mxsslcn/public_html/12ssl.com/modules/servers/nicsrs_ssl/view/complete.tpl
/home/mxsslcn/public_html/12ssl.com/modules/servers/nicsrs_ssl/view/home/css/common.css

十二、验收标准

数据

页面继续显示全部 49 条 IP。
编号保持 1–49 连续。
IP 内容与修改前完全一致。
下载证书和重签证书功能保持正常。

桌面端

大屏显示 4 列。
普通桌面显示 3 列。
每个项目内部只有“编号 + IP”两列。
不存在第三个空白 Grid 列。
所有 IP 字体、行高和分隔线一致。

平板和手机

平板显示 2 列。
手机显示 1 列。
编号和 IP 保持同一行。
表格不再继承 min-width: 720px。
页面无横向滚动。

代码

已签发列表使用独立语义 class。
申请表单、待验证页面和完成页面不再共享互相冲突的行布局规则。
不修改字段、Smarty 数据、API、数据库和业务逻辑。

十三、交付要求

完成后请提供：

实际修改文件的绝对路径。
新增语义 class 的位置。
删除或收窄了哪些通用选择器。
49 条 IP 的实际渲染核对结果。
桌面、平板和手机三种布局的验证结果。
确认下载证书和重签功能未被改变。

12SSL 已签发证书 IP 列表显示问题分析与修复要求 ​

检查页面 ​

一、检查结论 ​

二、直接根因 ​

申请表单行 ​

已签发证书行 ​

当前发生的 CSS 冲突 ​

三、移动端的附加冲突 ​

1. 强制最小宽度 ​

2. 所有数据行强制改为纵向 flex ​

四、建议的正确修复方法 ​

模板建议 ​

五、已签发 IP 列表桌面端布局 ​

推荐 CSS ​

六、响应式规则 ​

七、应同步收窄通用选择器 ​

八、数据顺序 ​

九、操作按钮位置 ​

十、不要采用的方案 ​

十一、需要修改的文件 ​

十二、验收标准 ​

数据 ​

桌面端 ​

平板和手机 ​

代码 ​

十三、交付要求 ​

12SSL 已签发证书 IP 列表显示问题分析与修复要求

检查页面

一、检查结论

二、直接根因

申请表单行

已签发证书行

当前发生的 CSS 冲突

三、移动端的附加冲突

1. 强制最小宽度

2. 所有数据行强制改为纵向 flex

四、建议的正确修复方法

模板建议

五、已签发 IP 列表桌面端布局

推荐 CSS

六、响应式规则

七、应同步收窄通用选择器

八、数据顺序

九、操作按钮位置

十、不要采用的方案

十一、需要修改的文件

十二、验收标准

数据

桌面端

平板和手机

代码

十三、交付要求