En a.css (un blog sobre estándares web, xhtml, css, etcétera en catalán) han escrito Problemes d'impressió en Firefox y me ha parecido muy interesante por lo que paso a traducirlo.
Firefox tiene dos problemas cuando maqueta un documento para imprimirlo que hay que tener en mente.
El overflow: auto
Cuando una caja tiene un overflow: auto declarado al CSS de
impresión Firefox sólo mostrará el contenido que no sobrepase una
página. Hace falta definirlo como overflow: visible o eliminarlo
si se puede.
Cajas flotantes sin width determinado
Con un XHTML tal que así:
<div id="contenedor"> <div class="flotante"> contenido </div> <div class="flotante"> contenido </div> </div>
Si todos los hijos de #contenedor son flotantes y no los cuenta,
los hijos flotantes sólo se verán afectados por el padding y
margin de éste en la página que se inicia pero no en las siguientes.
Si #contenedor es flotante, todos sus hijos son flotantes y no
tiene ningún width definido no se mostrará bien en pantalla ni en
impresión. Esto tiene una explicación en la especificación de CSS
2:
If 'left', 'right', 'width', 'margin-left', or 'margin-right' are specified as 'auto', their computed value is '0'.
Pero el resto de navegadores parece que actuan más como lo define la especificación CSS 2.1:
If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.
If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.
Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
Esto quiere decir que mientras la especificación CSS 2.1 no sea la oficial, el comportamiento de Firefox no es incorrecto ya que como comente en Les amplades dels elements amb float la especificación también dice:
A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements).
9.5 Floats (CSS 2 Specification)
Este texto deja de existir en la especificación de CSS 2.1.
La solución
Sólo hace falta declarar un width a la caja #contenedor que,
lógicamente, no sea width: auto.
Comentarios