Estirar el ancho correctamente al 100% de un elemento de bloque en línea en IE6 e IE7

Tengo el siguiente marcado, donde estoy tratando de obtener el lado derecho de la segunda tabla para alinear con el lado derecho del encabezado anterior eso. Esto funciona en IE8, Firefox y Chrome, pero en IE6/7 la tabla está estirada incorrectamente para ocupar el ancho de la página.Estirar el ancho correctamente al 100% de un elemento de bloque en línea en IE6 e IE7

Estoy usando el Trip Switch hasLayout trigger para aplicar inline-block en IE6/7.

¿Alguien sabe cómo (o incluso si) puedo obtener la tabla solo para llenar el ancho natural del elemento contenedor que se muestra con inline-block en IE6/7?

Puede ver el código que se ejecuta en vivo en http://jsbin.com/uyuva.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Test</title> 
<style> 
.wrapper { 
    display: inline-block; 
    border: 1px solid green; 
} 
/* 
display: inline-block triggers the wrapper element to have layout for IE 6/7. 
The trip switch then provides the inline component of the display behaviour. 
See http://www.brunildo.org/test/InlineBlockLayout.html for more details. 
*/ 
.wrapper { 
    *display: inline; 
} 

table { 
    border: 1px solid red; 
} 
</style> 
</head> 
<body> 
<h1>No width on table:</h1> 
<div class="wrapper"> 
    <h2>The right hand side of the table doesn't stretch to the end of this heading</h2> 
    <table><tr><td>foo</td></tr></table> 
</div> text 

<h1>Width on table:</h1> 
<div class="wrapper"> 
    <h2>The right hand side of the table should stretch to the end of this heading</h2> 
    <table style="width: 100%"><tr><td>foo</td></tr></table> 
</div> text 
</body> 
</html>

actualización: he aquí otro ejemplo del problema, esta vez sin necesidad de utilizar una mesa y el uso de un elemento contenedor con posición absoluta. Puede ver el código en vivo en http://jsbin.com/igila4.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Test</title> 
<style> 
div { 
    position: absolute; 
    border: 1px solid red; 
} 

input { 
    width: 100%; 
    *width: 95%; /* fudge factor for IE 6/7 which don't support box-sizing */ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

textarea { 
    width: 400px; 
} 
</style> 
<body> 
The width of the input and textarea below should be identical.<br/> 
<div> 
    <input value="This is an input with width 100%"><br/> 
    <textarea>This is a text area with width 400px.</textarea> 
</div> 
</body> 
</html>

Fuente

2010-04-30 Simon Lieschke

¿Está tratando de hacer coincidir específicamente la tabla con el ancho del H2 sobre ella o simplemente con llenar el ancho del div.wrapper independientemente del H2? –

Estoy tratando de hacer que la mesa coincida con el ancho del H2 si el H2 es más ancho que el ancho natural de la mesa. Si el H2 es más estrecho que el ancho natural de la mesa, entonces espero que el ancho del div.wrapper termine como el ancho natural de la mesa. –

No parece que esto puede lograrse sólo a través de CSS.

Evité deliberadamente el uso de secuencias de comandos porque prefiero aprovechar que el navegador vuelva a utilizar todo cuando la página se manipule dinámicamente en lugar de tener que escribir el código manual para actualizar el ancho.

Al final, eliminé el problema especificando un ancho mínimo para mis tablas que debería ser más ancho que la longitud de cualquier encabezado que tenga.

Internet Explorer 6 y 7 no son compatibles con min-width pero como tengo una secuencia de comandos común que crea las tablas que estoy mostrando, creo dinámicamente un elemento thead que tiene una sola celda que abarca cada columna que le doy efectivamente me dan el mismo resultado:

CSS

table { 
    min-width: 600px; 
} 
th.min-width { 
    *width: 600px; 
}

estructura de la tabla HTML

<table> 
    <thead><tr><th colspan="3" class="min-width"></th></tr></thead> 
    <thead> 
     <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
      <th>Column 3</th> 
     </tr> 
    </thead> 
    <tbody> 
     ... 
    </tbody> 
</table>

Fuente

2010-06-23 03:04:50

si se puede establecer una anchura en la envoltura (por ejemplo 50em), entonces la tabla se expandirá a la anchura de la envoltura.

Sin embargo, si necesita que el contenedor esté anudado dinámicamente, puede usar javascript para establecer el width de la tabla en offsetWidth del contenedor. Aquí está la página con el javascript agregado: http://jsbin.com/uyuva/5

Solo lo he probado en mi IE 8 con el modo de compatibilidad en ejecución, ya que no tengo IE 6/7.

Fuente

2010-05-01 18:03:48 szupie

Deberá usar javascript para obtener el ancho de h2 y aplicarlo a la tabla. No creo que el CSS puede manejar lo que necesita en todos los navegadores coughIEcough

Aquí es un buen sample para hacer referencia

Fuente

2010-05-03 04:40:18 TheGeekYouNeed

Estirar el ancho correctamente al 100% de un elemento de bloque en línea en IE6 e IE7

Respuesta

Cuestiones relacionadas