Am urmatorul codepen: https://codepen.io/anon/pen/ELMpqa
Deschideti in Chrome/Mozilla/Edge ca sa vedeti ce functionalitate doresc.
Deschideti si in IE11 sa intelegeti ce se intampla.
Am cautat pe net problema…ma rog, cat am putut ca sincer sa fiu nu prea inteleg ce se intampla.
A mai intalnit cineva asa ceva? aveti vreo idee/solutie?
*use dev tools ca sa vedeti mai bine structura poate
Eu din cate vad problema e position absolute, nu folosi position absolute cu flexbox, practic te impusti singur in picior si faci sistemul redundant. (sunt rare cazurile in care chiar ai nevoie de position:absolute cu flexbox pentru aliniere)
https://developers.google.com/web/updates/2016/06/absolute-positioned-children
Pe langa acest lucru nu oferi suport pentru IE11, doar pentru Edge in sus.
Afiseaza varianta de mobil pe o coloana in IE11, cu un simplu layout relativ/static.
3 Likes
Aveam nevoie sa pozitionez 2 elemente unul deasupra celuilalt, de-asta am avut nevoie de pozitionare absoluta + nu cred ca trebuie sa suport varianta de mobil.
Flexbox e suportat si de IE11 dar cu anumite bug-uri. Vezi caniuse.com
Anyway, am fixat-o pana la urma
Am pozitionat “bara” aia mica scurta cu position absolute si i-am dat un margin top sa se alinieze la mijloc, iar la cerc i-am dat margin top & left sa se aseze centrat.
Si am scos niste d-flex-uri de pe-acolo