Mam prostą stronę internetową z zawartością Lipsum, która jest wyśrodkowana na stronie. Strona działa dobrze w Chrome i Firefox. Jeśli zmniejszę rozmiar okna, zawartość wypełnia okno, aż nie może, a następnie dodaje pasek przewijania i wypełnia zawartość poza ekranem, w dół.
Jednak strona nie jest wyśrodkowana w IE11. Mogę wyśrodkować stronę w IE, wyginając ciało, ale jeśli to zrobię, zawartość zacznie znikać z ekranu w górę i obcina górę zawartości.
Poniżej znajdują się dwa scenariusze. Zobacz powiązane Skrzypce. Jeśli problem nie jest od razu widoczny, zmniejsz rozmiar okna wyników, tak aby było zmuszone do wygenerowania paska przewijania.
Uwaga: ta aplikacja jest przeznaczona tylko dla najnowszych wersji przeglądarek Firefox, Chrome i IE (IE11), które obsługują rekomendację kandydata Flexbox , więc kompatybilność funkcji nie powinna stanowić problemu (teoretycznie).
Edycja : podczas używania pełnoekranowego interfejsu API do pełnoekranowego zewnętrznego elementu div, wszystkie przeglądarki prawidłowo wyśrodkowują, używając oryginalnego CSS. Jednak po wyjściu z trybu pełnoekranowego IE powraca do wyśrodkowania w poziomie i wyrównania do góry w pionie.
Edycja : IE11 używa implementacji Flexbox innej niż producent. Aktualizacje układu elastycznego pudełka („Flexbox”)
Centruje i zmienia rozmiar poprawnie w Chrome / FF, nie wyśrodkowuje, ale poprawnie zmienia rozmiar w IE11
Skrzypce: http://jsfiddle.net/Dragonseer/3D6vw/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
Wyśrodkowuje się wszędzie, odcina od góry, gdy jest mniejszy
Skrzypce: http://jsfiddle.net/Dragonseer/5CxAy/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
display: flex;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
źródło
-ms-flexbox
dla IE ..Odpowiedzi:
Zauważyłem, że np. Przeglądarka ma problem z wyrównywaniem kontenerów wewnętrznych w pionie, gdy jest ustawiony tylko styl minimalnej wysokości lub gdy w ogóle brakuje stylu wysokości. To, co zrobiłem, to dodanie stylu wysokości z pewną wartością i to rozwiązało problem.
na przykład :
Mamy teraz styl wysokości, ale min-wysokość nadpisze go. W ten sposób tzn. Jest szczęśliwy i nadal możemy używać min-height.
Mam nadzieję, że to jest pomocne dla kogoś.
źródło
-ms-flex-align:center;
o IE10. Wsparcie dlaalign-items
zostało dodane tylko w IE11 .min-height
Rzeczywiście ma zastąpićheight
regułę, ale jeśli zawartość przekraczamin-height
będzie ona po prostu rozszerzyć poza granice. Odpowiedź przez @ericodes rozwiązuje ten problem i rozwiązanie działa na wszystkich przeglądarkach obsługujących Flex.Spróbuj owinąć dowolny element div, z którym masz flexbox,
flex-direction: column
do kontenera, który również jest flexbox.Właśnie przetestowałem to w IE11 i działa. Dziwna poprawka, ale dopóki Microsoft nie sprawi, że ich wewnętrzna poprawka będzie zewnętrzna ... to będzie musiało wystarczyć!
HTML:
CSS:
2 przykłady do przetestowania w IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/
źródło
min-height
zamiast twardejheight
reguły, przy jednoczesnym wyśrodkowaniu w pionie we wszystkich przeglądarkach obsługujących korzystanie zdisplay: flex
.display:flex
jest potrzebny na opakowaniu, a może na jednym z nich na dziecku: wwidth: 100%
flex-basis:100%
flex-grow:1
zależności od treści / stylu.align-items
. Musisz owinąć oryginalny flexbox w flexbox bez tej właściwości.align-items
właściwości (FlexContainerWrapper)?Oto moje rozwiązanie robocze (SCSS):
źródło
Na wypadek, gdyby ktoś dotarł tutaj z tym samym problemem, co ja, który nie został szczegółowo omówiony w poprzednich komentarzach.
Miałem
margin: auto
na elemencie wewnętrznym, który spowodował, że przykleił się do spodu swojego rodzica (lub elementu zewnętrznego). Naprawiło to dla mnie zmianę marginesu namargin: 0 auto;
.źródło
Jest to znany błąd, który prawdopodobnie został naprawiony wewnętrznie w firmie Microsoft.
https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview
źródło
Oryginalna odpowiedź z https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042
źródło
zaktualizowałem oba skrzypce. mam nadzieję, że dzięki temu wykonasz swoją pracę.
krążyna
wyśrodkuj i przewiń
źródło
Nie mam dużego doświadczenia,
Flexbox
ale wydaje mi się, że wymuszona wysokość tagówhtml
ibody
powoduje, że tekst znika na górze po zmianie rozmiaru - nie mogłem przetestować w IE, ale znalazłem ten sam efekt w Chrome.Rozwidliłem twoje skrzypce i usunąłem deklaracje
height
iwidth
.Wydawało się również, że
flex
ustawienia należy zastosować do innychflex
elementów. Jednak stosowaniedisplay: flex
się do.inner
spowodowanych kwestiami tak jawnie ustawić.inner
siędisplay: block
i ustawić.outer
sięflex
do pozycjonowania.Ustawiam minimalną
.outer
wysokość wypełniania rzutnidisplay: flex
, oraz ustawiam wyrównanie w poziomie i pionie:I ustawione
.inner
nadisplay: block
wprost. W Chrome wyglądało na to, że odziedziczyłflex
po.outer
. Ustawiłem też szerokość:To rozwiązało problem w Chrome, mam nadzieję, że może zrobić to samo w IE11. Oto moja wersja skrzypiec: http://jsfiddle.net/ToddT/5CxAy/21/
źródło
Znalazłem dobre rozwiązanie, które działało u mnie, sprawdź ten link https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 Najpierw dodajemy nadrzędny div, po drugie zmieniamy min-height: 100% na min- wysokość: 100 vh. To działa jak urok.
źródło
Jeśli możesz zdefiniować szerokość i wysokość rodzica, istnieje prostszy sposób na scentralizowanie obrazu bez konieczności tworzenia dla niego kontenera.
Z jakiegoś powodu, jeśli zdefiniujesz min-width, IE rozpozna również max-width.
To rozwiązanie działa dla IE10 +, Firefox i Chrome.
https://jsfiddle.net/HumbertoMendes/t13dzsmn/
źródło