Problema con larghezze basate su percentuale in Opera

Question

Sto provando a creare un layout a griglia fluida e ho avuto un problema con il rendering della larghezza incoerente in Opera. In Opera la larghezza degli elementi è costantemente inferiore rispetto agli altri browser. Sto provando il sistema a griglia 960 fluido, ma se non sarà coerente, potrei passare a dimensioni fisse.

Qualcuno sa come posso ottenere Opera per rendere la larghezza uguale agli altri browser?

Ecco il CSS e HTML che sto utilizzando per questa demo

.show_grid { 
    background: url(../img/grid.gif) no-repeat center top; 
} 

html, body{ 
    margin: 0; 
    padding: 0; 
} 
.container { 
    width: 92%; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 936px; 
    padding-top: 15%; 
} 
.box { 
    width: 15.633%; 
    background: #006; 
    color: #999; 
    margin: 5% .55% 
} 


<div class="container show_grid"> 
    <div class="box">2 column - browser name</div> 
</div> 

Answer 1

Opera arrotonda per cento widths ma non i valori percentuali tondi per imbottiture e margini.

Quindi, il modo semplice è impostare width: 15% e aggiungere padding-right:.633%. Ma così facendo, solo il blocco sarebbe più grande visivamente.

Se si desidera avere la larghezza giusta, tutti i child avranno la stessa larghezza, sarà necessario aggiungere un altro wrapper e aggiungere il margine negativo appropriato. Viene calcolato con questa formula: 100/width*padding, nel tuo caso: 100/15*0.633. Compenserebbe l'imbottitura e tutto sarebbe fresco.

Ecco un violino con tutte le varianti: http://jsfiddle.net/kizu/8q23d/ - larghezza fissa in pixel, blocco con width:15.633%, primo fix visivo e la giusta correzione alla fine.

Answer 2

---

Trattare con diversi modelli contenitore potrebbe essere molto difficile e richiede tempo. Suggerisco decisamente di evitare gli errori di CSS sporchi che non convalidano i file css.

Si potrebbe provare a eliminare l'uso di valori percentuali e andare per un layout "elastico". In questo caso si specifica la larghezza minima e la larghezza massima per gli elementi del blocco. Un articolo su di layout elastico è here e qualcosa di più here

In alternativa si potrebbe rilevare il browser usando JavaScript o via biblioteca e utilizzare i file CSS condizionale. Questo è il mio approccio preferito quando si tratta di IE.

conditional css è una libreria che ti aiuterà in questo, ma ci sono molte altre opzioni nel web.

Buona fortuna