Abaixo os resultados (visualização de impressão) com Chrome e IE:
 |
| Google Chrome |
 |
| Internet Explorer |
Percebi dois problemas:
1 - Nos dois navegadores algumas etiquetas seriam cortadas no salto de página.
2 - No IE a segunda página não imprimia os textos... só as imagens.
Meu primeiro chute foi o atributo "overflow:hidden;", que estava usando para controlar os textos dentro da etiqueta, depois de muitas tentativas e algumas buscas no Google, me convenci que não era este o problema, pois ao tirar o "float:left" que posicionava as etiquetas lado-a-lado o problema terminava.
Decidi então usar o atributo "display: inline" para colocar as etiquetas lado-a-lado, tive problemas... pois no Chrome e Firefox eu perdia a margem entre as etiquetas.
Passei a usar o inline-block. Ta-da!!!! Funcionou... No Chrome / Safari (webkit), no Firefox, e não tive o efeito esperado no IE.
Voltamos ao Google... vendo este link:
Inline Doesn't Work In IE 7,6 , consegui fazer funcionar corretamente em todos os browser...
A ideia foi:
display: inline-block;
*display: inline;
zoom: 1;
Segundo o autor (thirtydot) da resposta a explicação foi:
display:inline-block >>> não precisa explicar... eu acho.
*display: inline >>> hack CSS para IE 6,7, não testei... se alguém testar agradeço.
zoom: 1; >>> Esse é o detalhe... Segundo o autor, no IE existe uma propriedade (em termos de orientação a obejto) chamada "hasLayout", essa propriedade não pode ser definida explicitamente por CSS, e a falta desta traz uma série de problemas com propriedades flutuantes, margens... Uma forma de "definir" a propriedade "hasLayout" é usando a propriedade CSS zoom (only IE), o número "1", só quis dizer que o tamanho do objeto é o próprio objeto.
Após estes ajustes, minhas etiquetas renderizaram corretamente* em todos os browsers.
*No Firefox, não sei por que, as margens das DIV's não imprimiram corretamente, apesar de ficarem certas na renderização.
Vale a leitura das seguintes páginas que usei como referência:
http://stackoverflow.com/questions/5838454/inline-block-doesnt-work-in-internet-explorer-7-6
http://mathiasbynens.be/notes/safe-css-hacks#css-hacks
http://msdn.microsoft.com/en-us/library/ms531189.aspx
Edit 01: Link para a etiqueta: http://celsoneto.com.br/blog/etiqOutra.html
