Problema interpretazione box model fra vari browser

**Cajerkov** · 18-03-2009, 10:52

Buongiorno a tutti,
il codice qui di seguito da origine a risultati diversi su Firefox, IE7, Opera e Chrome (questi ultimi due forniscono la stessa visualizzazione).

Qualcuno mi sa suggerire un modo per risolvere il problema (ossia ottenere su tutti i browser ciò che ottengo su Firefox)?

Grazie!

CSS:

codice:

#box a {
height: 30px;
float: left;
width: 23%;
background-color: #CCCCCC;
padding: 8px 0 0 1%;
margin-left: 1%;
}

#box a.prova {
width: 25%;
padding: 8px 0 0 0;
margin-left: 0;
}

body<

HTML:

codice:

<body>
<div id="box">
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8
</div>
</body>

**Mich_** · 18-03-2009, 11:55

La differenza di interpretazione del box model fra browser diversi, e` una questione vecchia, gia` affrontata sotto vari aspetti.
Quindi trovi le varie risposte mediante ricerca nel forum (bottone in alto).

Comunque la tua domanda manca di un dato fondamentale: il DOCTYPE.

Se usi la DTD XHTML 1.0 strict, la visualizzazione dovrebbe essere quasi uguale in tutti i browser;
se usi una DTD transitional o HTML4, ci sono varie differenze (per IE e` necessario procedere coni commenti condizionali)
se usi invece XHTML 1.1 o XHTML 2, non c'e` possibilta` di farla interpretare correttamente da IE6

**Cajerkov** · 18-03-2009, 12:10

Ti ringrazio della risposta, il codice postato è un esempio "ripulito" del codice sul quale sto lavorando che evidenzia il problema.
Il doctype che vorrei arrivare ad usare è xhtml 1.0 strict, ho postato questo problema perché non vedo come ciò che ho trovato in giro possa aiutarmi a risolvere il problema (non capisco la ratio di 3 differenti visualizzazioni su 4 browser), fermo restando che il mio obiettivo è allineare n elementi A in fila in modo tale che il totale delle dimensioni (padding+margin+width) sia 100%.
Sto comunque dando un'occhiata in giro... ho risolto con IE, permangono problemi con Opera e Chrome. :master:

**Mich_** · 18-03-2009, 13:03

Allora posta un link alla pagina dove trovi queste differenze ...
E spiega meglio l'entita` delle differenze: con l'uso di (X)HTML e CSS e` difficile arrivare alla precisione del px, ma si possono contenere le differenze entro i 2-3 px (quindi invisibili alla maggior parte dei visitatori e con la maggior parte dei layout).

Ma se sono una serie di oggetti affiancati a 4 a 4, ti conviene usare una marcatura diversa, ad esempio:

codice:

<body>
  <ul id="box">[*]Box 1[*]Box 2[*]Box 3[*]Box 4[*]Box 5[*]Box 6[*]Box 7[*]Box 8[/list]
</body>

Cui applichi un CSS del tipo:

codice:

ul {
  width: ....;               /* va definita, altrimenti le % non hanno senso (*2) */
}
li {
  width: 24.9%;        /* scrivere 25 potrebbe dare problemi con gli arrotondamenti */
  float: left;
}
li a {
  padding: 8px 0 0 0;
  display: block;     /* potrebbe non servire, (*1) */
  width: 100%;       /* solo se c'e` il display: block; */
  height: 100%;     /* incompatibile con il padding-top; */
}

(*1) serve a dare consistenza e dimensioni al contenitore del link; tu lo avevi inserito in modo implicito con il float
(*2) la larghezza puo` essere definita anche in %, ma in tal caso deve essere definita la width anche dell'elemento che lo contiene (e via ricorsivamente fino al body e al html)

Discussione: Problema interpretazione box model fra vari browser

Strumenti discussione

Ricerca discussione

Visualizza

Problema interpretazione box model fra vari browser

Permessi di invio