problema de compatibilidad en firefox, contenido de tabla dinámico y absoluto

Cómo hacer esto (http://jsbin.com/uxayid/3/) también funciona en firefox?

Este es el css de los triángulos:

#c table tr td {
    height: 295px;
    width: 208px;
    background-color: white;
    border: 1px solid black;
    position: relative;
    text-align: center;
}
.tr-topright {
    border-left-width: 42px;
    border-top-width: 42px;
    border-left-color: white;
    border-left-style: solid;
    border-top-color: #BBBBBB;
    border-top-style: solid;
    box-shadow: -3px 3px 6px 0 lightGrey;
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}

El primero es el resultado esperado.

vista previa de chrome y firefox

preguntado el 05 de septiembre de 12 a las 10:09

1 Respuestas

Solo agrega:

display: block;
float: left;

de las personas acusadas injustamente llamadas

#c table tr td

gobernar

y debería funcionar bien.

Respondido el 05 de Septiembre de 12 a las 11:09

Gracias funciona. ¿Podría decirme cómo se enteró de esto? - usuario669677

@2astalavista: Noté que todos (en su ejemplo 4) los elementos de la esquina superior derecha ( pestañas) se apilaban uno encima del otro en la esquina superior derecha de la tabla. Eso me dijo que el modelo de caja no se aplicó para el contenido de los elementos TD. Pantalla: el bloque hizo eso. Efectivamente, instruyó al elemento para que respetara los límites de su contenedor. El flotante: izquierda se agregó para permitir que se mantenga su diseño. - tolismo7

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.