Chrome 108.0.5359.125版本后网页打印失败问题求助

问题现象 #

升级Chrome至108.0.5359.125版本后，包含<td colspan>的长内容表格在打印预览时，显示“Loading preview”后最终报错；该功能在Opera及旧版Edge中可正常运行。

问题定位 #

从提供的代码片段看，问题核心出在<tr>元素的异常样式上：

<tr class="gosterme islem" style="contain:strict; display:table;">

Chrome 108对表格元素（<tr>）的contain:strict属性处理存在打印渲染bug，同时将<tr>的display强制设为table会破坏原生表格的布局逻辑，在打印场景下触发渲染崩溃。

解决方案 #

方案1：移除tr上的异常样式 #

直接修改<tr>的样式，去掉contain:strict和不符合规范的display:table：

<tr class="gosterme islem">

若需保留contain属性的布局限制效果，可替换为contain:layout size（仅限制布局和尺寸，避免strict的强隔离导致打印渲染失败）。

方案2：通过打印媒体查询覆盖样式 #

如果无法直接修改原代码，可添加CSS媒体查询，在打印时强制修正样式：

@media print {
  tr.gosterme.islem {
    contain: none !important;
    display: table-row !important;
  }
}

方案3：简化嵌套表格结构 #

当前页面存在表格嵌套（外层<tr>的<td colspan>内嵌套另一表格），复杂结构在Chrome新打印引擎下容易触发渲染问题。可尝试将嵌套表格改为div布局，保持视觉效果一致的同时降低渲染复杂度。

内容的提问来源于stack exchange，提问作者Büşra Güler