Cuando trato de usar position: relative
/ position: absolute
en un
en Firefox, parece que no funciona.
- Pie de página adhesivo CSS con altura desconocida
- CSS: diseñó una checkbox para que parezca un botón, ¿hay un elemento emergente?
- ¿Debo completar las citas de los nombres de las familias de fonts en CSS?
- ¿Pueden las consultas de medios cambiar el tamaño en función de un elemento div en lugar de la pantalla?
- ¿Es posible cambiar el esquema de Validación de CSS en VS2010?
La forma más fácil y adecuada sería envolver el contenido de la celda en una posición div y agregar: en relación con ese div.
ejemplo:
This will be positioned normally This will be positioned at 5,5 relative to the cell
No debería ser problema. Recuerde también configurar:
display: block;
Como cada navegador web que incluye Internet Explorer 7, 8 y 9 maneja correctamente la posición: relativo en un elemento de visualización de tabla y solo Firefox lo maneja de forma incorrecta, lo mejor es usar un calce de JavaScript. No debería tener que reorganizar su DOM solo para un navegador defectuoso. La gente usa calzas de JavaScript todo el tiempo cuando IE obtiene algo mal y todos los otros navegadores lo hacen bien.
Aquí hay un jsfiddle completamente anotado con todo el HTML, CSS y JavaScript explicados.
http://jsfiddle.net/mrbinky3000/MfWuV/33/
Mi ejemplo anterior de jsfiddle usa técnicas de “Diseño web adaptable” solo para mostrar que funcionará con un diseño receptivo. Sin embargo, su código no tiene que ser receptivo.
Aquí está el JavaScript a continuación, pero no tendrá mucho sentido fuera de contexto. Por favor revisa el enlace jsfiddle arriba.
$(function() { // FireFox Shim // FireFox is the *only* browser that doesn't support position:relative for // block elements with display set to "table-cell." Use javascript to add // an inner div to that block and set the width and height via script. if ($.browser.mozilla) { // wrap the insides of the "table cell" $('#test').wrapInner(''); function ffpad() { var $ffpad = $('.ffpad'), $parent = $('.ffpad').parent(), w, h; // remove any height that we gave ffpad so the browser can adjust size naturally. $ffpad.height(0); // Only do stuff if the immediate parent has a display of "table-cell". We do this to // play nicely with responsive design. if ($parent.css('display') == 'table-cell') { // include any padding, border, margin of the parent h = $parent.outerHeight(); // set the height of our ffpad div $ffpad.height(h); } } // be nice to fluid / responsive designs $(window).on('resize', function() { ffpad(); }); // called only on first page load ffpad(); } });
Comenzando con Firefox 30, podrás usar la position
en los componentes de la mesa. Puede probarlo usted mismo con la comstackción nocturna actual (funciona como independiente): http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/
Caso de prueba ( http://jsfiddle.net/acbabis/hpWZk/ ):
Puede seguir la discusión de los desarrolladores aquí sobre los cambios (el tema tiene 13 años ): https://bugzilla.mozilla.org/show_bug.cgi?id=63895
A juzgar por el reciente historial de lanzamientos , esto podría estar disponible tan pronto como en mayo de 2014. ¡Apenas puedo contener mi entusiasmo!
EDITAR (6/10/14): Firefox 30 fue lanzado hoy. Pronto, el posicionamiento de la mesa no será un problema en los principales navegadores de escritorio
A partir de Firefox 3.6.13, la posición: relativa / absoluta no parece funcionar en los elementos de la tabla. Parece ser el comportamiento de Firefox desde hace mucho tiempo. Vea lo siguiente: http://csscreator.com/node/31771
El enlace CSS Creator publica la siguiente referencia W3C:
El efecto de ‘position: relative’ en los elementos table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell y table-caption es indefinido. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme
Intenta usar display:inline-block
funcionó para mí en Firefox 11, dándome capacidad de posicionamiento dentro del td / th sin destruir el diseño de la mesa. Que junto con la position:relative
en un td / th debería hacer que las cosas funcionen. Acabo de hacerlo funcionar yo mismo.
Tenía un elemento de table-cell
(que en realidad era un DIV
no un TD
)
Reemplacé
display: table-cell; position: relative; left: .5em
(que funcionó en Chrome) con
display: table-cell; padding-left: .5em
Por supuesto, el relleno generalmente se agrega al ancho en el modelo de caja, pero las tablas siempre parecen tener una mente propia cuando se trata de anchuras absolutas, por lo que esto funcionará en algunos casos.
Agregando display: block al elemento principal funcionó en firefox. También tuve que agregar top: 0px; izquierda: 0px; al elemento padre para que Chrome funcione. IE7, IE8 e IE9 también funcionan.
// A table of information here. // Next line is the child element I want to overlay on top of this table //child element info
La solución aceptada funciona, pero no si agrega otra columna con más contenido en ella que en la otra. Si agrega height:100%
a su tr , td y div, entonces debería funcionar.
This will be positioned normally This will be positioned at 5,5 relative to the cell
El único problema es que esto solo soluciona el problema de altura de columna en FF, no en Chrome e IE. Así que está un paso más cerca, pero no es perfecto.
Actualicé un violín de Jan que no funcionaba con la respuesta aceptada para mostrar que funcionaba. http://jsfiddle.net/gvcLoz20/
- ¿Es background-position-x (background-position-y) una propiedad estándar de W3C CSS?
- ¿Cuál es el punto de los márgenes de colapso CSS?
- ¿Tienes una variable en la ruta de las imágenes en Sass?
- El canvas se estira al usar CSS pero es normal con propiedades de “ancho” / “alto”
- ¿Cuál es la diferencia entre html y html: lang (en) en CSS?
- CSS Justifica el texto, llena el espacio con puntos
- Centro imagen de gran tamaño en div
- ¿Puedo aplicar múltiples colores de fondo con CSS3?
- Cambia condicionalmente la clase CSS en la vista Razor
- ¿@Page {size: landscape} está obsoleto?
- ¿Los pseudo elementos CSS3 :: antes y :: después son compatibles con IE9 o no?
Intereting Posts
Es background-color: none valid CSS?¿Opacidad del borde CSS3?diferencias de altura de entrada en Firefox y ChromeAnimaciones CSS con retraso para cada elemento secundario¿Cuál es la diferencia entre max-device-width y max-width para web móvil?jQuery alternar CSS?enésimo hijo por cada dos filas de la tablaCómo crear los efectos de mampostería con solo bootstrap 3 grid system y css