Ancho de elemento dinámico y precisión de subpíxeles IE9

Tengo 3 divs, #left, #center y #derecho que quiero ubicar en la misma línea que tiene un ancho específico, por ejemplo 300px.Ancho de elemento dinámico y precisión de subpíxeles IE9

#left y #right tienen poco contenido, digamos 50px cada uno, y los estoy mostrando completamente.

#center tiene un montón de contenido, digamos 400px, y quiero mostrar tanto como sea posible dentro del espacio restante en la línea. Para esto, he incluido el contenido de #center dentro de #inner.

He dejado flotando #left y #center a la izquierda y #right a la derecha.

<div id="left"> 
    LEFT 
</div> 
<div id="center"> 
    <div id="inner"> 
     LONG CONTENT ... 
    </div> 
</div> 
<div id="right"> 
    RIGHT 
</div>

Example fiddle

Pregunta 1: ¿Hay una manera de hacer que el #center div tomar todo el espacio que queda disponible en la línea a través de CSS (en nuestro ejemplo, #center tiene que ser 200 píxeles de ancho - el ancho de la línea, 300px, menos el ancho de #left y #right, cada 50px)?

Pregunta 2: No encontré una solución a través de CSS y he usado jQuery para calcular dinámicamente el espacio disponible restante. Esto funciona bien en todos los navegadores excepto IE9.

El problema con IE9 es que tiene precisión subpíxel y jQuery solo devuelve valores enteros para las dimensiones de los elementos.

Aquí hay un ejemplo: IE9 ve que #left tiene un ancho de 50.5px, mientras que jQuery lo ve como 50px. Esta diferencia hace que el diseño se rompa en IE9.

Si necesito calcular el espacio disponible a través de JavaScript, ¿qué puedo hacer para solucionar este problema de IE9?

Fuente

2012-05-06 jsgroove

No estoy seguro de si esto va a funcionar, pero podría usted acaba de baja el valor devuelto 50,5 y hacer ir a 50? Si los valores son siempre más, entonces esto funcionará. Si dijera 49.5, entonces será un píxel corto, pero esto al menos no hará que su contenido no encaje. –

No hay forma de que yo afecte el valor de flotación usado en su distribución. Cuando llamo el ancho del elemento con jQuery en IE9, siempre devuelve un entero, 50px. Pero en la pantalla interna, IE9 usa flotadores, 50.5px. Lo sé porque revisé las herramientas de desarrollo de IE9 y para las dimensiones del elemento muestra los valores flotantes. – jsgroove

Entonces, cuando establece el ancho en 50px, ie9 lo establece en 50.5px? Eso es extraño ... Alineé las cosas así antes en un nivel de píxel y nunca tuve problemas. Parece extraño. ¡Buena suerte, lo siento, no pude ayudar! –

Para referencia futura, lo que hice era forzar la anchura que IE9 ve como un flotador para el valor que jQuery ve como un entero :

var elem = $("#element"); 
elem.css("width", elem.width());

Si #element tenía un valor visto por IE9 como 50.5px, jQuery obliga a un valor en él que ve jQuery, 50 px.

Fuente

2012-05-07 06:36:14 jsgroove

Prueba esto:

main = $("#main").width(); 
centerWidth = main - ($("#left").width() + $("#right").width()); 
$("#center").width(centerWidth);

main = parseFloat(document.getElementById("main").style.width) 
centerWidth = main - (parseFloat(document.getElementById("left").style.width) + parseFloat(document.getElementById("right").style.width)); 
document.getElementById("center").style.width = centerWidth + "px"

Fuente

2012-05-06 15:59:52 undefined

Especifiqué que lo hice y no funciona en IE9 porque IE9 tiene valores flotantes para el ancho y jquery solo devuelve valores enteros. Ejemplo: IE9 ve #left como 50.5px, jquery ve #left como 50px. Este valor flotante hará que el diseño se rompa porque no cabe en el valor calculado debido a 0.5px más que IE9 ve. – jsgroove

@jsgroove ¿Has probado el método 'Math.ceil()'? – undefined

No hay nada para usar el elemento Math.ceil() porque jquery siempre devuelve el ancho del elemento como un entero. Solo IE9, internamente lo ve como un flotador. – jsgroove

Mi solución:

el = $('#myelement'); 

//Hello IE9-10 and float "width", e.g. 83.41px; 
try { 
    var elWidth = Math.ceil(parseFloat(getComputedStyle(el[0]).width)); 
} 
//But old browser doesn't know "getComputedStyle()" e.g. IE 8 and oldest; 
catch (e) { 
    var elWidth = el.width(); 
} 

elWidth; //IE 9-10 return 84px, other browsers 83px;

Fuente

2013-08-08 11:15:06 NeoXaker

Ancho de elemento dinámico y precisión de subpíxeles IE9

Respuesta

Cuestiones relacionadas