Chrome打破了打印表格的垂直对齐方式

时间:2012-02-01 02:16:06

标签: html css google-chrome

这是一个难以解释的问题。一张图片说千言万语,所以我们走了:

Screenshot of print preview

请注意第四行的问题 - 这四个单元格的内容已被推送到单元格内。

HTML非常标准。一大堆<tr>标记,每个标记包含5个<td>标记。没有特别奇怪的CSS:

table {border-spacing:0; width:100%; border-collapse:collapse} 
td {padding:3px; vertical-align:top; border-bottom:1px solid #ccc; background:#fafafa}

需要注意的一点是灰色边框位于<td>上,而不是<tr> - 此边框出现在正确的空格中,因此它只是被按下的表格单元格的内容。

我已经注释掉了所有的CSS,问题仍然存在。

在5页打印输出中,此问题只发生一次,但还有其他几个问题:

  • 两排大约是他们应该的高度的1.5倍。一个在文本上方有空格,另一个在
  • 下面
  • 当我注释掉CSS时,我注意到有些行在中间分开(即使我的CSS中有tr, td {page-break-inside:avoid}
  • 在我的测试中,我发现Chrome中显示的源代码与提供的HTML不同(在HTTP嗅探器上捕获)。具体来说,它错过了一个</中途(来自</a>),使得HTML无效。很确定这是一只红鲱鱼。

为了测试这个,我已经制作了一份页面副本,删除了敏感数据,删除了所有多余的脂肪,问题肯定仍然存在。这可以在http://dl.dropbox.com/u/8750708/test.html查看。

在Chrome中打开该链接,转到打印预览(Ctrl-P),您将希望查看问题。我不确定我的机器到机器是否100%一致,但我看到了以下问题:

  • 第1页的3/4,W00629
  • 第1页底部,切断
  • 1/2页第2页,W00592
  • 第2页底部,切断
  • 1/3向下翻页3,W00607
  • 接近第4页,W00561 / W00512
  • 第4页底部,切断

在进一步测试方面,我已经交换了行的顺序。问题发生在同一个地方,所以我认为它与细胞的内容无关。

那么,我在CSS中缺少的任何魔术?这是Chrome中的错误吗?

编辑:仅在Windows上的Chrome中确认 - 显然,由于字体处理不同,其他操作系统可能会有所不同。

2 个答案:

答案 0 :(得分:1)

试试这个黑魔法javascript解决方法。同时在表格上设置border-spacing:0并确保删除表格上方元素的上/下边距。您可以用填充替换它们。有关how this worksexample的详细信息。

var tableClass = 'chromePrint';
function ischrome() { return Boolean(window.chrome); }

if ( ischrome() ){
    if (document.styleSheets.length == 0){
        var st = document.createElement('style');
        st.setAttribute("type", "text/css");
        document.getElementsByTagName('head')[0].appendChild(st);
    }
    function fixChromeTablePrinting(){
        var ss = document.styleSheets[0];
        var dt = document.getElementsByClassName(tableClass);
        for(var t=0;t<dt.length;t++){
            var rows = dt[t].getElementsByTagName('tr');
            var lastRow = rows[rows.length-1];
            var cells = lastRow.getElementsByTagName('td');
            var tableWidth = 0;
            var mediaPrintRules = '.'+tableClass+' tr { display: table }';
            mediaPrintRules += '.'+tableClass+' tr { width: 100% }';
            //set sane (relative to chrome bugs) defaults in case someone forgot
            mediaPrintRules += 'body { margin: 0}';
            mediaPrintRules += '.'+tableClass+' { border-spacing: 0 }';
            for (var i=0;i<cells.length;i++){ tableWidth += cells[i].clientWidth; }
            for (var i=0;i<cells.length;i++){
                var per = (100 * (cells[i].clientWidth / tableWidth)).toFixed(2);
                mediaPrintRules += '.'+tableClass+' td:nth-child('+(i+1)+') {width: '+per+'%}';
            }
            ss.addRule('@media print', mediaPrintRules);
        }
    }
    document.addEventListener('DOMContentLoaded', fixChromeTablePrinting, false);
}

答案 1 :(得分:0)

五年后,我仍然遇到vertical-align同样的问题,但 似乎尊重弹性框放置 - 这打印正确,&#34;嘿& #34;在底部。

<html>                       
<head>     
<style>
.down {                                                                    
  display: flex;           
  justify-content: flex-end;                                                                
  flex-direction: column;                                                                   
  height: 300px;                                                                            
  background: #ccf;                                                                         
}                                                                                           
.down > div {                                                                               
  background #cfc;                                                                          
}                                                                                           
</style>                                                                                    
</head>                                                                                     
<body>                                                                                      
<div class="down">                                                                          
  <div>hey</div>                                                                            
</div>                                                                                      
</body>                                                                                     
</html>