这是一个难以解释的问题。一张图片说千言万语,所以我们走了:
请注意第四行的问题 - 这四个单元格的内容已被推送到单元格内。
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页打印输出中,此问题只发生一次,但还有其他几个问题:
tr, td {page-break-inside:avoid}
</
中途(来自</a>
),使得HTML无效。很确定这是一只红鲱鱼。为了测试这个,我已经制作了一份页面副本,删除了敏感数据,删除了所有多余的脂肪,问题肯定仍然存在。这可以在http://dl.dropbox.com/u/8750708/test.html查看。
在Chrome中打开该链接,转到打印预览(Ctrl-P),您将希望查看问题。我不确定我的机器到机器是否100%一致,但我看到了以下问题:
在进一步测试方面,我已经交换了行的顺序。问题发生在同一个地方,所以我认为它与细胞的内容无关。
那么,我在CSS中缺少的任何魔术?这是Chrome中的错误吗?
编辑:仅在Windows上的Chrome中确认 - 显然,由于字体处理不同,其他操作系统可能会有所不同。
答案 0 :(得分:1)
试试这个黑魔法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);
}
答案 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>