a.css

esbudellant estàndards


Problemes d'impressió en Firefox

29/03/07

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.

Comentaris

  1. Comentat per choan el 29/03/07

    el comportament del Firefox no és incorrecte

    Però sí curiòs. Sembla que segueixe la recomendació de CSS 2.1 en pantalla però la de CSS 2 en impressió. No et sembla una mica absurd? Quant al overflow, què fan la resta de navegadors?

  2. Comentat per are el 29/03/07

    En pantalla tampoc segueix CSS 2.1, fa coses un tant extranyes quan es troba un pare flotant sense width amb fills flotants.

    Opera i Safari no donen problemes amb l'overflow, IE no l'he provat.

  3. Comentat per are el 30/03/07

    En Internet Explorer 6 l'overflow va bé però en Internet Explorer 7 falla.

  4. Comentat per SigT el 05/04/07

    Problemas de impresión en Firefox a tener en cuenta...

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

Afegir un comentari


New Order ringtonesJoe Nichols ringtonesKC and JoJo ringtones3 Doors Down ringtones

© Arnau Siches. a.css està sota Llicència Creative Commons.