Si vuole che sia i tabs che il contenitore abbiano padding e border.
1: A e' inline con padding e border, LI e' float ed ha padding verticale per racchiudere A, UL e' float per racchiudere gli LI ed ha border.
2: A e' block (riduce problemi di inclusione) con padding e border ed e' float altrimenti IE/Mac non shrinka LI, LI e' float, UL e' float per racchiudere gli LI ed ha border.
3: A e' inline con padding e border, LI e' inline, UL e' block ed ha padding verticale per includere gli A, ed ha border (white space va eliminato.)
4: A e' block (riduce problemi di inclusione) con padding e border ed e' float altrimenti IE/Mac non shrinka LI, LI e' float, (UL non gioca alcun ruolo), LI ed un clearing BR sono racchiusi da un contenitore che ha border.
7: Come 3, ma LI e' inline-block per IE5/Mac
1 e 2 non vanno in Op7: UL float senza width shrinka piu' che con gli altri browser, portando gli LI in verticale (Op6 no, corretto in 8+.) Si potrebbe risolvere con una width su UL, ma 100% genera scrollbar orizzontali a causa di border (e box model strict.) Se non si vuole background (rosa) e bordo (rosso) di diverso colore si potrebbe usare padding verticale su UL e margine destro su ultimo LI.
Comunque meglio evitare float su UL, aggiungere un oggetto "clear" dopo UL e racchiudere tutto in un contenitore. E' 4. Opportuno anche per avere background su 100% width. Questo metodo per avere il contenitore che racchiude i float avrebbe problemi in certe versioni di IE/Win, che si risolvono con hasLayout
Inclusione di un elemento inline con padding e border (1, 3, 5) da parte di un block non e' realizzabile con precisione (almeno in alcuni browser, non IE). Ma le discrepanze non si notano se background e bordo di contenitore hanno lo stesso colore.)
Box su elementi inline hanno strano problema anche in IE6/Win (non in IE5.5-): quando non c'e abbastanza spazio orizzontale l'ultimo/primo perde padding e border right/left.
3 in IE/Mac: esce sulla "destra" (e' right aligned il testo "escluso" padding e border right), e ci sono problemi con hover, come se le zone "sensibili" fossero replicate allineate a sinistra.
5 e 6 sono come 3 e 4, ma left
8: A e' inline con padding e border, LI e' inline, UL e' block ed ha padding verticale per includere gli A, ed ha border, text-align: center
9: A e' block con padding e border (ed e' float altrimenti IE/Mac non shrinka LI), LI e' float (inline-block per IE/Win e IE5/Mac), UL e' display:table per includere float e centrare orizzontalmente (inline-block dentro un contenitore con text-align: center per IE)
10: Analogo a 9. Alcune proprieta' distribuite diversamente tra contenitore ed ul, per avere background (e bordo esterno) su width 100%