Overlay 100% che copre TD in IE

Question

Sto cercando di eseguire una colonna di uguale altezza fluida, con un "sovrapposizione" al clic.

Per ottenere il funzionamento di altezza uguale reattiva, ho creato la "sovrapposizione" del contenuto di base effettivo (quindi dimensiona le colonne) e sto tentando di inserire lo stato iniziale nell'overlay.

Questo funziona perfettamente su FF e Chrome, ma non su IE10 o 11 (non sono stati testati in precedenza).

Su IE, fare position: absolute; right: 0; left: 0; top: 0; bottom: 0 all'interno di un TD non sembra far sì che l'overlay copra l'intero TD, piuttosto solo la dimensione del contenuto al suo interno.

http://codepen.io/anon/pen/dooJjb

Tutte le idee?

Punti bonus: Ciò che il mio progettista inizialmente desiderava era che l'intestazione si facesse scorrere e che i paragrafi scivolassero dal basso - non pensate davvero che sia possibile senza un sacco di JS?

Answer 1

Non ho controllato il tuo esempio in IE, ma so che ci sono modi server per far funzionare tutto questo su tutti i browser.

evito sempre prima & dopo con il layout come hanno alcuni problemi di cross browser, questo potrebbe non essere il vostro tappo di spettacolo attuale, ma in entrambi i casi prima & dopo non sono davvero per il layout IMHO.

ho fatto qualcosa di simile qualche mese fa:

1. [[box, scatola, scatola] [overlay, overlay, overlay]]: I due titolari hanno posizione assoluta, superiore & sinistra = 0, z-index del titolare della sovrapposizione: 1.

2. [[casella, sovrapposizione] [casella, sovrapposizione] [casella, sovrapposizione]]: le caselle sono relative e le sovrapposizioni sono posizionate in modo assoluto. Tutte le dimensioni di sovrapposizione sono definiti e dato un z-index di 1.

La chiave è quello di mantenere lo si pulisce davvero non hanno bisogno di più di 3 livelli di profondità in questo scenario non vi resta che la posizione, e insieme gli strati giusti.

Animare i paragrafi sarebbe pulito, con jQuery ma preferirei a noi un'altra lib di animazione come GSAP. Ma se è necessario in modo nativo e se si può permettere di saltare l'animazione con IE8 allora si avrà fondamentalmente impostare le transizioni CSS3 e usare qualcosa come .classList per attivare o disattivare la classe http://jsfiddle.net/davidThomas/Tpz86/

function classToggle() { 
    this.classList.toggle('class1'); 
    this.classList.toggle('class2'); 
} 
document.querySelector('#div').addEventListener('click', classToggle);