Nakładka pokrywająca 100% TD w IE

Question

Czekam na kolumnę o podobnej wysokości, o podobnej wysokości, z "nakładką" na kliknięcie.

Aby uzyskać prawidłową pracę z równą wysokością, utworzyłem "nakładkę" na rzeczywistą zawartość podstawową (aby zmieściła się w kolumnach), a następnie próbuję umieścić stan początkowy w nakładce.

Działa to dobrze na FF i Chrome, ale nie na IE10 lub 11 (nie testowałem wcześniej).

Na IE, wykonanie position: absolute; right: 0; left: 0; top: 0; bottom: 0 wewnątrz TD nie sprawia, że ​​nakładka pokrywa cały TD, a jedynie rozmiar zawartej w nim zawartości.

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

Jakieś pomysły?

Punkty bonusowe: Co mój projektant chciał początkowo, aby nagłówek przesuwał się, a akapity przesuwały się od dołu - nie sądzisz, że jest to możliwe bez dużej ilości JS?

Answer 1

Nie sprawdziłem twojego przykładu w IE, ale wiem, że istnieje kilka sposobów, aby to zadziałało we wszystkich przeglądarkach.

zawsze unikać przed & po z układu, ponieważ mają one pewne problemy krzyżowe przeglądarki, to może nie być aktualna wystawa korek ale tak czy inaczej przed & po naprawdę nie są dla układu IMHO.

Zrobiłem coś podobnego kilka miesięcy temu:

1. [[skrzynka, pudełko, box] [nakładka, nakładka, nakładka]]: Dwa uchwyty mają pozycję absolutną, Top & lewy = 0, uchwyt nakładki z-index: 1.

2. [[box, overlay] [box, overlay] [box, overlay]]: Pola są względne, a nakładki są ustawione absolutnie. Wszystkie wymiary nakładki są określone i podane z-indeks 1.

Najważniejsze jest, aby utrzymać go w czystości naprawdę nie potrzeba więcej niż 3 poziomy głęboko w tym scenariuszu wystarczy pozycji i ustaw warstwy w prawo.

Animowanie akapitów byłoby czyste, z jQuery, ale wolałbym dla nas inną bibliotekę animacji jak GSAP. Ale jeśli musisz natywnie i czy można sobie pozwolić na pominięcie animacji z IE8 wtedy w zasadzie ustawić przejścia CSS3 i użyć coś jak .classList aby przełączyć klasa http://jsfiddle.net/davidThomas/Tpz86/

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