|
El Firefox té dos problemes quan formateja una document per imprimir que val la pena tenir en ment.
L'overflow: auto
Quan una caixa té un overflow: auto declarat al CSS d'impressió el Firefox només mostrarà el contingut d'aquest que no sobrepassi una pàgina. Cal definir-lo com a overflow: visible o eliminar-lo si es pot.
Caixes flotants sense width determinat.
Donat un XHTML tal que:
<div id="contenidor">
<div class="flotat">
contingut
</div>
<div class="flotat">
contingut
</div>
</div>
Si tots els fills de #contenidor són flotants i no els conté, els fills flotats només es veuran afectats pels padding i margin d'aquest a la pàgina on s'inicia la caixa però no en les següents.
Si #contenidor és flotant, tots els seus fills són flotants i no té cap width definit no es mostrarà bé ni en pantalla ni en impressió. Això té una explicació a l'especificació de CSS 2:
If 'left', 'right', 'width', 'margin-left', or 'margin-right' are specified as 'auto', their computed value is '0'.
10.3.5 Floating, non-replaced elements (CSS 2 Specification)
La resta de navegadors però, sembla que actuen més com es defineix a l'especificació 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).
10.3.5 Floating, non-replaced elements (CSS 2.1 Specification)
Això vol dir que fins que l'especificació de CSS 2.1 no sigui la oficial el comportament del Firefox no és incorrecte ja que tal com comentava a «Les amplades dels elements amb float» l'especificació també diu:
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)
Aquest text deixa d'existir a l'especificació de CSS 2.1.
La solució
Només cal declarar un width a la caixa #contenidor que lògicament no sigui width: auto. |