Problema con los anchos basados en porcentajes en Opera

Estoy tratando de hacer una disposición de cuadrícula fluida y me he encontrado con un problema con el rendimiento de ancho incoherente en Opera. En Opera, el ancho de los elementos es consistentemente más pequeño que los otros navegadores. Estoy probando el sistema de red fluido 960, pero si no es consistente, entonces puedo cambiar a tamaños fijos.Problema con los anchos basados en porcentajes en Opera

¿Alguien sabe cómo puedo hacer que Opera haga el ancho igual que los otros navegadores?

example of Opera browser not render something the percentage width it should be

Aquí es el CSS y HTML estoy usando para este 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>

Fuente

2011-08-17 Paul Sheldrake

Opera rondas ciento widths pero no los valores porcentuales redondas para rellenos y márgenes.

Por lo tanto, la manera fácil es configurar el width: 15% y agregar padding-right:.633%. Pero al hacerlo, solo el bloque sería más grande visualmente.

Si desea que su ancho sea justo para que todos los niños tengan el mismo ancho, deberá agregar otro envoltorio y agregarle el margen negativo correspondiente. Se calcula con esta fórmula: 100/width*padding, en su caso: 100/15*0.633. Sería compensar el relleno y todo sería genial.

Aquí es un violín con todas las variantes: http://jsfiddle.net/kizu/8q23d/ - ancho fijo en píxeles, bloque con width:15.633%, primera corrección visual y la corrección adecuada al final.

Fuente

2011-08-17 10:59:54 kizu

Gracias por su respuesta. Es una pena que tenga que ser arreglado añadiendo más marcado. –

¡Muchas gracias por esa respuesta! = D – JCM

Tratar con diferentes modelos de cajas podría ser muy difícil y lleva mucho tiempo. Definitivamente le sugiero que evite hacks CSS sucios que no validarán sus archivos CSS.

Puede tratar de descartar el uso de valores porcentuales y obtener un diseño "elástico". En este caso, especifique el ancho mínimo y el ancho máximo para los elementos del bloque. Un artículo sobre el diseño elástico es here y algo más here

En alternativa se podría detectar el navegador utilizando Javascript o por medio de la biblioteca y utilizar los archivos CSS condicionales. Este es mi enfoque favorito cuando se trata de IE.

conditional css es una biblioteca que te ayudará con eso, pero hay muchas más opciones en la web.

Buena suerte

Fuente

2011-08-17 10:34:19 Rdpi

Gracias por la respuesta, no había visto esa biblioteca de CSS condicional anteriormente. –

Problema con los anchos basados ​​en porcentajes en Opera

Respuesta

Cuestiones relacionadas

Problema con los anchos basados en porcentajes en Opera