Flexbox na IE11: obraz rozciągnięty bez powodu?
Mam problem z flexbox na IE11 i chociaż wiem, że jest wiele znanych problemów, nie byłem w stanie znaleźć rozwiązania...
<div class="latest-posts">
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
<div class="article-content">
<h2>THIS IS POST TITLE</h2>
<p>BLAH</p>
</div>
</article>
</div>
I CSS...
img {
max-width: 100%;
}
.latest-posts {
margin: 30px auto;
}
article.post-grid {
width: 375px;
float: left;
margin: 0 25px 100px 0;
padding-bottom: 20px;
background-color: #fff;
border: 1px solid #f3f3f3;
border-radius: 2px;
font-size: 14px;
line-height: 26px;
display: flex;
flex: 1 0 auto;
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
}
.article-content {
padding: 20px 35px;
}
Obrazy są rozciągane w elastycznym kontenerze.
Zastosowanie align-items: flex-start (domyśliłem się, ponieważ "rozciągnięty" jest wartością domyślną...) lub justify-content: flex-start nie wydaje się działać.
Codepen: przykład co mam na myśli
Co robię źle?6 answers
Aby uniknąć tego śmiesznego zachowania, możesz zresetować Właściwość flex-shrink.
To wygląda jak błąd, pomimo tego, co mówi Microsoft:
Ustawia współczynnik skurczu flex lub ujemną elastyczność dla elementu flex. Współczynnik skurczu flex określa, o ile element flex zmniejszy się w stosunku do innych elementów w kontenerze flex.
Jeśli pominięto, ujemna elastyczność elementu wynosi "0". Wartość ujemna nie jest prawidłowa.
Źródło: https://msdn.microsoft.com/en-us/library/jj127297%28v=vs.85%29.aspx https://msdn.microsoft.com/en-us//library/hh772069%28v=vs.85%29.aspx
img {
max-width: 100%;
flex-shrink: 0;
}
img {
max-width: 100%;
flex-shrink: 0;
}
.latest-posts {
margin: 30px auto;
}
article.post-grid {
width: 375px;
float: left;
margin: 0 25px 100px 0;
padding-bottom: 20px;
background-color: #fff;
border: 1px solid #f3f3f3;
border-radius: 2px;
font-size: 14px;
line-height: 26px;
display: flex;
flex: 1 0 auto;
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
}
article.post-grid .article-content {
padding: 20px 35px;
}<div class="latest-posts">
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
<div class="article-content">
<h2>THIS IS POST TITLE</h2>
<p>Society excited by cottage private an it esteems. Fully begin on by wound an. Girl rich in do up or both. At declared in as rejoiced of together.</p>
</div>
</article>
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
<div class="article-content">
<h2>MUCH LONGER POST TITLE TO ILLUSTRATE HEIGHTS</h2>
<p>Recommend new contented intention improving bed performed age.</p>
</div>
</article>
<article class="post-grid">
<img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
<div class="article-content">
<h2>SHORT TITLE</h2>
<p>Merry alone do it burst me songs. Sorry equal charm joy her those folly ham. In they no is many both. Recommend new contented intention improving bed performed age. Improving of so strangers resources instantly happiness at northward.</p>
</div>
</article>
</div>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-08-06 10:21:11
Miałem rozciągnięcie obrazu na osi poprzecznej (rozciągnięcie na wysokości, używając Flex-direction: row).
Ten Stack Overflow Q / A pomógł mi go rozwiązać:
Musiałem ustawić następujący CSS na moim img:
align-self: flex-start;
Możesz potrzebować innej wartości niż flex-start Oczywiście, w zależności od celu. Moim jest, aby mój wizerunek był na szczycie rzędu.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-11-15 14:38:55
Miałem podobny błąd w IE11. Style zostały zaczerpnięte z Bootstrap 4.1, więc dla płynnych obrazów miałem:
.img-fluid {
border: none;
height: auto;
max-width: 100%;
}
W moim przypadku okazało się, że powód był w {[2] } więc kiedy zmieniłem go na width: 100% błąd zniknął:
.img-fluid {
border: none;
height: auto;
width: 100%;
}
To rozwiązanie nie jest dla każdego przypadku, ale mam nadzieję, że będzie pomocne.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-04 20:46:13
W moim przypadku kombinacja "flex-shrink: 0" sugerowana przez G-Cyr i "align-self: flex-begin" sugerowana przez Ricka Schoonbeeka zrobiła sztuczkę. Miałem opakowanie, które używało flex box do wyśrodkowania obrazu z "justify-content: center;"
Wszystko było dobre w IE 11, Chrome, Safari z wyjątkiem IE Edge nie był w stanie wyświetlić poprawnie. dodanie dwóch atrybutów na obrazie rozwiązało problem z IE Edge.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-06-17 17:24:25
Próbowałem wszystkich rozwiązań, ale nic nie działało. Jedyną rzeczą, do której używałem flexbox, było pionowe wyśrodkowanie obrazu wyświetlanego po najechaniu kursorem na inny obraz. Więc po prostu użyłem bardziej klasycznego rozwiązania à la top: 50%; transform: translateY(-50%) i wtedy było ok. Więc zasadniczo nie używaj flexbox w ogóle wtedy.. # hateIE
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-03 06:42:18
Miałem problem z rozciągniętymi obrazami produktów w IE11, i zrobiłem kilka badań i próbowałem różnych rzeczy.
To był mój kod:
.productImage {
position: relative;
overflow: hidden;
img {
position: absolute;
display: block;
height: 100%;
object-fit: contain;
top: 0;
}
}
Potem zdałem sobie sprawę, że mój obraz height: 100% był winowajcą rozciągniętego obrazu, i po prostu usunąłem swoją wysokość, ale wtedy mój obraz był na górze mojego pojemnika .productImage zamiast być wyśrodkowany pionowo. Wprowadziłem tu flex i ustawiłem go za pomocą prostego align-items: center, ale to oczywiście nie działało w IE11. Próbowałem też flex-shrink: 0, ale to też nie zadziałało.
Potem poszedłem do przodu, aby pominąć za pomocą flex i wypróbował klasyczny top: 50%; left: 50%; transform: translate(-50%, -50%); ale to nie było dobre, ponieważ już miałem transformację w użyciu dla mojego efektu powiększenia na hover na obrazie.
Skończyłem z tym rozwiązaniem zamiast:
.productImage {
position: relative;
overflow: hidden;
img {
position: absolute;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
}
To działało jak czar
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-02-20 13:00:31