css - para - tablas en html5

Altura de las celdas de tabla calculada de forma diferente en IE11

Question

El problema al que me enfrento es que IE 11 parece tener una altura interna <td> inconsistente en un solo <tr> mientras que otros navegadores lo mantienen igual.

Aquí hay un bolígrafo que ilustra mi problema: http://codepen.io/anon/pen/emKEBZ

En mi diseño, tengo un pseudo-elemento (borde verde) absolutamente posicionado que quiero mostrar en un (externo) <td> . Me gustaría que siempre sea tan alto como el <tr> se encuentra. El contenido de <td> s es dinámico; no tengo control sobre su tamaño (como lo hago en el lápiz).

Le di height: 100% , suponiendo que cada <td> en una fila tiene la misma altura.

td {
position: relative;
}
td:before {
content: "";
display: block;
position: absolute;
top: 0;
left: -5px;
width: 3px;
height: 100%;
background-color: green;
}

Y sí, esa altura se calcula con el mismo valor en todas las celdas de la misma fila en Firefox y Chrome:

pero a diferentes alturas para cada celda en IE 11:

El problema parece ser que en height: 100% IE se refiere a la altura interna (la que está dentro del relleno) de la que contiene <td> , mientras que otros navegadores toman la altura total (altura + relleno + borde). E incluso entonces, la altura interna de todos los <td> s a lo largo de uno <tr> es idéntica en Firefox, mientras que no está en IE. ¿Alguno de esos enfoques está mal? ¿Hay alguna manera de obligar a IE a funcionar como lo hacen otros navegadores?

Answer 1

Comportamiento extraño e interesante por IE sobre table-cell aquí. Si desea un enfoque, debe poner la celda en el bloque en línea y establecer el valor de altura, luego alinear el contenido usando línea-altura y también restablecer la altura de línea para el contenedor de texto como:

td {
display: inline-block;
height: 137px;
position: relative;
line-height: 137px;
}
p {
display: inline-block;
vertical-align: middle;
background-color: #dedede;
line-height: 1;
}

Prueba IE, espero que esto te ayude: http://codepen.io/pik_at/pen/WbyZrG

Answer 2

Finalmente logré hacer eso. Aquí está el código, espero que ayude. Violín aquí.

var spans = document.querySelectorAll( "span.bar" ),
count = spans.length;
while ( count-- ) {
spans[count].style.height = spans[count].parentElement.offsetHeight + "px";
}

body {
padding:15px;
}
table {
border: 1px solid black;
border-spacing: 10px;
cell-spacing: 0;
}
tr {
border: 1px solid red;
}
td {
vertical-align:center;
position:relative;
box-sizing: border-box;
position: relative;
border: 1px solid black;
}
td .bar:first-child,
td .bar:last-child {
display: block;
background: green;
width: 3px;
left: -5px;
height: 100%;
position: absolute; top: 0;
z-index: 1;
}
p {
margin: 0;
background-color: #dedede;
padding: 0px;
}
.tall {
height: 100px;
}
.medium {
height: 60px;
}
.short {
height: 30px;
}

<table cellspacing="1" cellpadding "0" border="0">
<tr>
<td>
<span class="bar"></span><p class="tall">Save me!</p><span class="bar"></span>
</td>
<td>
<span class="bar"></span><p class="medium">From problems</p><span class="bar"></span>
</td>
<td>
<span class="bar"></span><p class="short">With IE</p><span class="bar"></span>
</td>
</tr>
</table>

Answer 3

Voy a agregar un margin para un total de 100

.tall {
height: 100px;
}
.medium {
height: 60px;
margin: 20px 0;
}
.short {
height: 30px;
margin: 35px 0;
}