Torna all'indice
Articolo originale
Allora, abbiamo un elemento di blocco e un altro elemento di blocco al suo interno. L'elemento interno contiene del testo e gli è stato dato position: relative più letter-spacing: xxx. Guardiamolo in IE5.5/win. Cosa c'è? La prima lettera del testo non si vede più! È interessante notare che è rimasto dello spazio al suo posto. Questo particolare bug di solito si vede nelle intestazioni, per motivi che diverranno ovvi.
Nel demo precedente, il div esterno ha uno sfondo grigio, e il div interno ha un bordo rosso. Notate che la stringa di testo sembra essere al posto giusto. È il div interno che sembra contratto nella larghezza di una lettera. Ho scoperto che quando il contenuto viene posto al di fuori del contenitore con 'position: relative', in IE risulta di solito invisibile, come in questo caso.
Soluzioni: Si tratta di un bug piuttosto fastidioso, che può essere facilmente eliminato con delle soluzioni di design. Un modo è quello di avere un bordo superiore, non sul div interno come pensereste (quello posizionato e con 'letter-spacing') ma sul div esterno (?). Il test che segue ha un bordo superiore (porpora) sul div esterno.
La prossima soluzione è uguale alla prima, tranne per il fatto che invece di un bordo superiore questa volta abbiamo del padding superiore. Mettere padding o bordi su ogni altro lato, o sul div interno, non risolvono il bug.
Ora passiamo a 'width'. Se voi date al div interno col bordo rosso una larghezza (o una 'height'), la lettera mancante risulta visibile ('width: 60%'). Guardate! Le lettere sono troppo distanti! Oppure... (?)
Un paragone con Opera e Mozilla rivela che il test precedente è di fatto solo uno di tutti i test che vanno bene se visti in IE5.5/6. Gli altri test mostrano circa la metà dello spazio richiesto. Infatti, se l'unità per 'letter-spacing' viene data in pixel piuttosto che in em, anche questo test rivelerà che lo spazio è stato ridotto.
Si gente, due bug di IE al prezzo di uno! Prendeteli finchè sono caldi.
A proposito, Opera/Mozilla/Win e IE5.2.1/OSX visualizzano i test correttamente.
Il prossimo test ha la stessa larghezza, ma applicata stavolta al div esterno in grigio.
Risulta che il bug dello spazio dipende da quale elemento ha un dato 'font-size'. In altre parole, se la dimensione del font pari a 2.5em viene data sull'elemento 'body', tutti i testi avranno la corretta spaziatura. Così se la larghezza viene data sull'elemento esterno ma il font allargato su quello interno (come nel demo precedente), il bug della spaziatura non sarà risolto. Confusi?
Infine, la soluzione più probabile per eliminare il bug tra tutte quelle viste sinora, ossia una riga di testo estesa. Ecco perchè il bug della prima lettera si restringe alle intestazioni et similia.
Come ultima cosa ho trasformato il div interno in uno span.
Affascinante! Lo span interno viene ancora spinto di una lettera come nel primo demo, ma stavolta il testo viene mostrato. C'è qualcosa di veramente strano qui...
Screenshot:
IE5,
IE5.5,
IE6
Moz, Op6 e IE5.2/Mac (simili)
Grazie a Edwardson Tan per gli screenshot e la motivazione, a Peter Bowyer per aver trovato il bug e la sua causa ('letter-spacing'), a Stephanie Sullivan per le info sul Mac, e a tutti i membri della mailing list css-discuss.
Holly e John
Contatta Holly
Contatta John
©positioniseverything
Ultimo aggiornamento: 20 settembre 2002
Creato il 20 settembre 2002
