以打印样式显示元素不会出现在 Chrome 打印预览中答案

【问题标题】：Displaying an element in print style does not appear in Chrome Print Preview以打印样式显示元素不会出现在 Chrome 打印预览中
【发布时间】：2017-09-06 14:25:23
【问题描述】：

我有一个联系表格，我只想在我的网页上显示在打印版本中。我正在使用 Twig 和 Contact Form 7。

<div class='print-only'>{{ content.accept_form }}</div>

在 css 中：

.print-only {
   display: none;
}

我的打印样式是：

@media print {
   transition: none !important;

    div, p, ul {
        page-break-before: avoid;
    }

   .print-only {
       display: block !important;
   }
}

查看使用 Chrome 开发工具模拟打印的页面时，它看起来不错，但是，当我打开打印对话框进行实际打印时，它无处可见。

【问题讨论】：

对我来说似乎很好。您是否应该将 {{ content.accept_form }} 替换为硬编码字符串，您能看到吗？可能是绑定本身没有返回任何内容。
好点 - 显示任何添加到该 div 的字符串，但此页面中还有其他表单在打印时显示得很好，如果我删除显示：主页面中的无样式表。

标签： html css google-chrome

【解决方案1】：

原来问题是由于元素上的一些动画导致它不显示。我删除了动画，效果很好！

【讨论】：