html - para - ¿Cómo puedo colocar un elemento en la parte inferior de su contenedor en Firefox?
insertar video en html5 (7)
Según el W3C , la posición: relative no tiene ningún efecto sobre las celdas de la tabla:
"El efecto de ''position: relative'' en table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell y table-caption los elementos no están definidos ".
La solución es agregar un div de envoltura adicional a la celda de la tabla.
EDITAR: Este div requiere una height:100% y position:relative; para ajustar.
<table>
<tr>
<td>
<div style="position:relative;height:100%;">
Normal inline content.
<div class="manage">your absolute-positioned content</div>
</div>
</td>
</tr>
</table>
Tengo una celda de tabla, y quiero un div dentro para que siempre esté en la esquina inferior izquierda. Lo siguiente funciona bien en IE y Safari, pero Firefox está posicionando el div absolutamente en la página, no dentro de la celda (código basado en la solución de solución aquí ). He probado tanto con y sin el DTD, que puso a Firefox en el modo Quirks y en el modo Estándares, y ninguno de los dos funcionó correctamente. Estoy atascado, ¿alguna idea?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
table { width:500px; }
th, td { vertical-align: top; border:1px solid black; position:relative; }
th { width:100px; }
.manage { text-align:right; position:absolute; bottom:0; right:0; }
</style>
</head>
<body >
<table>
<tr>
<th>Some info about the following thing and this is actually going to span a few lines</th>
<td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
</tr>
<tr>
<th>Some info about the following thing and this is actually going to span a few lines</th>
<td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
</tr>
</table>
</body>
</html>
position: relative aparentemente no es compatible globalmente con la etiqueta td . No pude encontrar fuentes definitivas por desgracia.
Es posible que desee colocar un bloque div en la td con el tamaño deseado y aplicar la position: relative con eso en su lugar.
Derecha, posición: relative no tiene ningún efecto para los elementos de la tabla, y firefox aplica esta regla. La solución del div funciona, pero este es un marcado terrible en mi opinión.
¿Necesitas usar una tabla para mostrar este contenido? (¿O es relativo?)
Si no, ¿por qué no usas elementos div y haces lo que quieres?
Para usar tablas para problemas de diseño es tan 1998 ...
Esto puede sonar muy obvio, pero ha intentado usar vertical-align: bottom; en. administrar?
Vea si esto funciona para usted. No estoy seguro de la exactitud del problema, pero tiene algo que ver con el uso de td con el posicionamiento relativo. Envolví la mesa con la etiqueta div y lo posicioné relativamente y parece hacer lo que quieras.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
table { width:500px; }
th, td { vertical-align: top; border:1px solid black; }
th { width:100px; }
div.body {position:relative; width:500px;}
.manage { text-align:right; position:absolute; bottom:0; right:0; display:block}
</style>
</head>
<body >
<div class="body"><table>
<tr>
<th>Some info about the following thing and this is actually going to span a few lines</th>
<td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
</tr>
</table></div>
</body>
</html>
tener un DIV dentro del TD con ancho: 100% y alto: 100%, luego establecerlo en posición: relativo.
Ponga una display:block en la mesa y ahora FF respeta la posición: relativa.