CSS page-break-inside在旧版浏览器的打印兼容性处理？-css教程-PHP中文网

page-break-inside: avoid 在 ie11 中部分支持但不可靠，在 firefox ≥ 65 中基本失效；现代浏览器已弃用该属性，应改用 @media print 中的 break-inside: avoid-page。

css page-break-inside在旧版浏览器的打印兼容性处理？

page-break-inside: avoid 在 IE11、Firefox 浏览器中仍可工作，但仅对 position: static/relative 的普通块级元素有效；它对表格、flex 子项、浮动或绝对定位元素基本无效——这不是兼容性问题，而是规范本就不支持。

哪些旧浏览器还真正支持 page-break-inside

IE11 完全支持 page-break-inside: avoid（包括 table 元素）；Firefox 19–64 对该属性有部分支持，但对 tr、td 和 display: inline-block 元素会静默忽略；Safari 5.1–14.4 支持 page-break-inside，但不支持在 flex 或 grid 容器内生效。Chrome 1–79 基本可靠，但对 position: absolute 元素始终不处理。

关键点：page-break-inside 是 CSS2 打印模块的遗留属性，W3C 已明确弃用，所以“支持”仅指引擎尚保留解析逻辑，不代表行为一致。

为什么给 tr 加 page-break-inside: avoid 总是失败

表格行（tr）在 CSS 规范中不是块级盒（block box），而是表格盒（table box），而 page-break-inside 只定义在块级上下文中。所有主流旧浏览器都遵守这一限制，加了也白加。

错误写法：tr { page-break-inside: avoid; }
有效替代：table { page-break-inside: avoid; }（小表格适用）
更稳妥做法：用 tbody 包裹逻辑段，再对每个 tbody 应用 page-break-after: always（旧版兼容性更好）

如何安全降级到现代 break-inside

不能直接替换，必须用 @supports 隔离。旧浏览器遇到不认识的 break-inside 会跳过整条规则，甚至可能连带废掉同组其他声明（如 margin、border）。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

正确写法：

@media print {
  @supports (break-inside: avoid) {
    .print-card, .invoice-item {
      break-inside: avoid;
    }
  }
  @supports not (break-inside: avoid) {
    .print-card, .invoice-item {
      page-break-inside: avoid;
    }
  }
}

注意：@supports not 中的 fallback 必须是旧属性，且只作用于已验证支持的元素类型（比如别把 page-break-inside 加到 span 上）。