Chrome浏览器中@media print失效？如何移除打印时的页面链接？

我来帮你搞定这两个Chrome打印相关的样式问题，结合你尝试过的方法，给你针对性的代码方案和排查思路：

一、解决@media print规则不生效的问题 #

Chrome 66确实存在一些打印样式解析的小细节坑，加上你已经把其他<link>标签设为media="screen"，可以从这几个方向入手：

1. 强化样式优先级，避免被覆盖
   有时候你的打印样式会被页面其他高优先级的CSS覆盖，试试给规则加上更具体的选择器，或者强制提升优先级：

   /* 用body作为父选择器提升优先级 */
   @media print {
     body a[href]:after {
       content: none !important;
     }
   
     @page {
       size: auto;
       margin: 0mm;
     }
   }
   

2. 通过开发者工具检查样式状态
   打开Chrome开发者工具（F12），点击右上角的「Toggle device toolbar」（手机图标），然后在设备列表里选择「Print」模式，此时可以查看元素的样式面板，看你的@media print规则是否被划掉（如果是，说明被其他样式覆盖了，需要进一步调整优先级）。

3. 清除缓存或用隐身模式测试
   Chrome有时候会缓存旧的CSS文件，导致新的打印样式不生效。试试按下Ctrl+Shift+R强制刷新页面，或者打开隐身窗口重新测试，排除缓存干扰。

4. 添加Chrome专属打印渲染属性
   针对Chrome的打印渲染特性，添加这个属性可以确保样式被正确解析：

   @media print {
     * {
       -webkit-print-color-adjust: exact !important;
     }
   }
   

二、彻底移除打印时的页面链接 #

Chrome默认会给所有带href的<a>标签添加链接后缀，你之前的代码方向是对的，但可以调整得更彻底：

@media print {
  /* 彻底移除所有a标签的链接后缀 */
  a[href]:after {
    content: "" !important; /* 清空内容 */
    display: none !important; /* 直接隐藏元素 */
    visibility: hidden !important;
  }

  /* 如果只需要移除特定区域的链接（比如正文内容），可以更精准 */
  .article-content a[href]:after {
    content: none !important;
  }
}

另外，如果页面里有锚点链接（比如href="#top"），也可以单独排除避免误处理：

@media print {
  a[href^="#"]:after {
    content: none !important;
  }
}

三、额外验证步骤 #

1. 检查CSS语法：确保你的@media print块没有语法错误，比如括号未闭合、分号遗漏，语法错误会导致整个打印样式块失效。
2. 排查动态脚本：确认页面中没有JavaScript代码在打印时动态修改或重置CSS规则。

内容的提问来源于stack exchange，提问作者Expressingx