css - para - tablas en html5
Altura de las celdas de tabla calculada de forma diferente en IE11 (3)
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
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?
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>
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;
}