问题
I want to print to A4 using css.
A4 is 297mm high - 6 mm margin top - 6 mm margin bottom = 285 mm should be left for content.
In IE 11 :
I have to set page borders to 6 mm and disable header/footer
--> Text appears where it should when I set content height to 284 mm (1 mm diff is close enough for me)
In Chrome 33:
I don't have to change any settings
--> Text is located far below from where it should be. It only works when I set content height to 267 mm (where did 18 mm diff go?)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@page {
margin: 6mm;
size: A4 portrait;
}
body {
margin: 0mm;
}
table {
page-break-after: always;
border-spacing:0mm;
}
tr {
vertical-align: bottom;
height:284mm;
}
</style>
</head>
<body>
<table>
<tr>
<td>Page 1</td>
</tr>
</table>
<table>
<tr>
<td>Page 2</td>
</tr>
</table>
</body>
</html>
Is there something wrong with my css or does Chrome not know the size of 1 mm?
回答1:
I figured it out just now. It is not enough to set height, I need to set width as well. (I still need to set height to 284 instead of 285, but that is ok (probably a rounding error))
tr {
vertical-align: bottom;
height:284mm;
width:198mm;
}
来源：https://stackoverflow.com/questions/22024144/chrome-seems-to-miscalculate-css-sizes-given-in-mm-unit-when-printing