Chrome打印桌面垂直对齐

这是一个难以解释的问题。一张照片讲千言万语，所以在这里我们去：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无效。很确定这是一个红色鲱鱼

为了测试这个，我做了一个页面的副本，删除了敏感数据，删除了所有多余的脂肪，问题绝对是st不在场。这可以在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中确认 - 显然其他操作系统可能因不同的字体处理而有所不同。

来源

2012-02-01 SpoonNZ

这在firefox中显得很好..你使用脚本来生成这个表吗？ – 2012-02-01 06:47:00

是的我正在使用脚本来生成它，但它并不重要 - 请参阅之前的链接http://dl.dropbox.com/u/8750708/test.html这是静态HTML，问题仍然存在那里。而且我知道它在Firefox中显得很好。正如您可能从提及“Chrome”的标题中注意到的，四次我在正文中提到“Chrome”或“google-chrome”标记时，这是Chrome中的一个问题。似乎在其他浏览器中都能正常工作。 – SpoonNZ 2012-02-01 22:49:18

试试这个黑暗魔法的javascript解决方法。同时在表格上设置border-spacing：0，并确保删除表格上方元素的顶部/底部边距。你可以用填充替换它们。有关how this works和example的详细信息。

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); 
}

来源

2012-05-04 02:54:50 somasin

五年后，我仍然有同样的问题与vertical-align，但它确实似乎尊重柔性盒放置 - 此打印正确，与“哎”在底部。

<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>

来源

2017-07-16 02:31:52 rescdsk

Chrome打印桌面垂直对齐

回答

相关问题