Chrome打印Bug - 错误地将表头打印在页面顶部

Question

Chrome打印Bug - 错误地将表头打印在页面顶部

htmlcssgoogle-chrome

6

（补充说明：这是 Chrome问题631222，已在Chrome版本54.0.*中修复。）

使用最新版本的Chrome（53.0.2785.116），在Windows和Mac上，我们遇到了一个无法解决的严重错误。

我们正在寻求不涉及编辑HTML文本的解决方法，因此CSS或JavaScript答案可能可行。

我们在除第一页之外的页面顶部收到看起来像以下内容的文本：

这是一个段落的叠加层，以及在页面后面出现的两个不同表头的表格。（其中表头再次被打印。）

您可以在此处找到完整的示例页面。

当然，我们已经向Google报告了这个问题，但我们想知道是否有人能想到解决方案，以便让我们的客户再次打印。我们无法更改HTML，但可以更改CSS或可能使用JavaScript。（例如，删除thead标签似乎可以解决问题，但该解决方法对我们无效，因为我们无法更改HTML。）

代码非常简单：

<!DOCTYPE html>
<html><head>
<title>Broken Printing</title>
</head>
<body>
<h1>Printing Issue 9/29/2016</h1>
<p>Lorem ipsum for page break</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<table> 
    <thead><tr><th>Survey</th></tr></thead>
    <tbody><tr class="odd"><td>The Foundation 2016&nbsp;</td></tr></tbody>
</table>

<table>
    <thead><tr><th>Year</th></tr></thead>
    <tbody><tr><td>2015</td></tr></tbody>
</table>

</body>
</html>

- Thomas Andrews

我们现在有一个部分解决方法 - 将thead显示的CSS设置为“table-row-group”。如果表格跨页拆分，这种方法并不完美，但在我们的情况下很少出现。 - Thomas Andrews

@MrLister 是的，我不确定为什么验证器会收到403错误。当我将URL的内容粘贴到验证器中时，它可以正常工作。不确定我的网站上的403出了什么问题-我在日志中看到w3c请求，并得到403响应。我没有在我的.htaccess文件中看到任何可能导致这种情况的东西。 - Thomas Andrews

不仅仅是这个页面，整个网站都有这个问题。除此之外，你的页面没有任何问题。我认为这是Chrome的一个bug。将thead更改为另一个tbody是否可行？这只需要一小段简单明了的JavaScript代码即可实现。 - Mr Lister

@MrLister 是的，我认为这是我的提供商配置的问题 - 我曾经经常在我的网站上使用W3C验证器。 - Thomas Andrews

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thomas Andrews · Accepted Answer

我们有一个解决方法：

@media  print {
    thead { 
        display: table-row-group 
    }
}

在我们的报告中，这会丢失一个我们不太需要的功能-在页面断点处重复表头-因此对我们来说已足够，并且在Chrome得到修复时可以轻松删除。