Salve a tutti!
Scrivo in questa sezione perché, come da titolo, ho riscontrato (almeno) due incongruenze nella realizzazione di un sito fittizio come allenamento per mettere a punto le conoscenze apprese nello studio dei fogli di stile.
Detto questo, andiamo al punto. Ecco i due problemi cui accennavo:
- Il primo riguarda sostanzialmente la compatibilità cross-browser. Nell'header del sito ho inserito il classico menu di navigazione a tendina con annidamento multiplo, dove cioè ci sono due livelli di sottomenu. Il tutto è realizzato con la solita tecnica basata sulle liste annidate e i list-item settati su float: left. Ho fatto in modo, grazie al contenuto generato, che i list-item che introducono un sottomenu presentino una freccettina sul lato destro, diretta verso il basso nel caso si tratti del primo livello o a destra se invece introducono la seconda tendina, quella "laterale". La freccetta altro non è che una .png di 18px x 18px, con la proprietà position: absolute. Ora, tralasciando i disastrosi effetti ottenuti su IE8 (a cui penserò in seguito), il problema è che l'allineamento verticale "base" della freccia cambia a seconda che si visualizzi la pagina con Chrome o Firefox. Per la precisione, Chrome assume come origine del sistema di riferimento il punto in alto a sinistra, come al solito; Firefox, al contrario, allinea verticalmente l'immagine. Quindi chiaramente si ottengono effetti diversi a seconda del browser. Concludo con uno snippet del codice usato per il contenuto generato e con due screenshot del risultato sui diversi browser.
chrome_screen.jpgfirefox_screen.jpgcodice:#menu > .flyout-item > a::after { content: url(images/bottom_arrow.png); position: absolute; top: 50%; right: 5px; margin-top: -9px; }- Il secondo problema che ho riscontrato riguarda sempre il contenuto generato, solo che questa volta non riguarda la posizione ma la quantità. Infatti, un semplice testo (" Leggi tutto") generato dopo un paragrafo viene stampato anche subito prima dello stesso, come se nella regola insieme all':after fosse stato usato anche il :before.
Mi scuso per la prolissità del post, spero almeno di essermi spiegato e che qualcuno abbia una soluzione...![]()