弹性项目宽度未在IE中调整大小

Question

我正在尝试建立“平铺”负载，并且在Internet Explorer中遇到了麻烦-大多数/所有其他浏览器似乎都不错。问题是，我希望磁贴在台式机上仅每行4个，在移动设备上每行2个，但是在IE中，其他磁贴仅挤在同一行上，而不是移至下一行。

弹性项目的宽度似乎不起作用，应为23.5％（在台式机上）和48.5％（在移动设备上）。有人可以解释这是怎么回事吗？看来IE不喜欢现代代码！

/* Flex Tests */
.sad-flex {
    display: flex;
    flex-flow: row wrap;
}
.flex-item {
    width: 23.5%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flex-item:not(:nth-of-type(4n+1)) { margin-left: 2% }
.flex-item:nth-of-type(n+5) { margin-top: 2% }
.flex-item-image-link { width: 100% }
.flex-item img {
    width: 100%;
    background-size: cover;
    background-position: center;
}
.flex-item, .flex-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1em;
    text-align: center;
    font-family: arial; /* perhaps remove */
    justify-content: flex-start;
}
.flex-text-content { padding: 10px }
.flex-item .flex-text.header {
    margin-bottom: 0;
    font-weight: 700;
    width: 100%;
}
.flex-item .flex-text.header a { color: #000 }
.flex-item .flex-text.price {
    padding-top: 20px;
    font-size: 1.4em;
    color: grey;
}
.flex-item .flex-text.description {
    font-size: 1em;
    padding-top: 20px;
    max-height: 6em; /* limits to 3 lines of text */
    overflow: hidden;
}
.flex-item .flex-btn {
    border: none;
    outline: 0;
    padding: 12px;
    color: #fff;
    background-color: #000;
    cursor: pointer;
    width: 100%;
    font-size: 1.3em;
    margin: auto auto 0 auto;
}
.flex-item .flex-btn:hover { opacity: 0.7 }
.flex-item ul { text-align: left }
@media (max-width: 767px) {
    .flex-item:not(:nth-of-type(4n+1)) { margin-left: 3% }
    .flex-item { width: 48.5% }
    .flex-item:not(:nth-of-type(even)) { margin-left: 0 }
    .flex-item:nth-of-type(n+3) { margin-top: 3% }
}
/* IE FIXES */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .sad-flex {
        -ms-flex-direction: row;
        -ms-flex-wrap: wrap;
    }
    .flex-item {
        -ms-flex: 1;
    }
    .flex-item * { width: 100% }
}

<div class="sad-flex">

    <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
    

<div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>

</div>

Answer 1

IE不支持flex: flex-grow flex-shrink flex-basis的缩写。

您需要将其更改为flex-grow。

例如这个

flex: 1 2 30px;

应替换为此

flex-grow: 1;
flex-shrink: 2;
flex-basis: 30px;

以您的情况

.flex-item {
    flex-grow: 1;
}

/* Flex Tests */
.sad-flex {
    display: flex;
    flex-flow: row wrap;
}
.flex-item {
    width: 23.5%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flex-item:not(:nth-of-type(4n+1)) { margin-left: 2% }
.flex-item:nth-of-type(n+5) { margin-top: 2% }
.flex-item-image-link { width: 100% }
.flex-item img {
    width: 100%;
    background-size: cover;
    background-position: center;
}
.flex-item, .flex-text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1em;
    text-align: center;
    font-family: arial; /* perhaps remove */
    justify-content: flex-start;
}
.flex-text-content { padding: 10px }
.flex-item .flex-text.header {
    margin-bottom: 0;
    font-weight: 700;
    width: 100%;
}
.flex-item .flex-text.header a { color: #000 }
.flex-item .flex-text.price {
    padding-top: 20px;
    font-size: 1.4em;
    color: grey;
}
.flex-item .flex-text.description {
    font-size: 1em;
    padding-top: 20px;
    max-height: 6em; /* limits to 3 lines of text */
    overflow: hidden;
}
.flex-item .flex-btn {
    border: none;
    outline: 0;
    padding: 12px;
    color: #fff;
    background-color: #000;
    cursor: pointer;
    width: 100%;
    font-size: 1.3em;
    margin: auto auto 0 auto;
}
.flex-item .flex-btn:hover { opacity: 0.7 }
.flex-item ul { text-align: left }
@media (max-width: 767px) {
    .flex-item:not(:nth-of-type(4n+1)) { margin-left: 3% }
    .flex-item { width: 48.5% }
    .flex-item:not(:nth-of-type(even)) { margin-left: 0 }
    .flex-item:nth-of-type(n+3) { margin-top: 3% }
}
/* IE FIXES */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .sad-flex {
        -ms-flex-direction: row;
        -ms-flex-wrap: wrap;
    }
    .flex-item {
        flex-grow: 1;
    }
    .flex-item * { width: 100% }
}

<div class="sad-flex">

    <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
    

<div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>
  
  <div class="flex-item">
    <a class="flex-item-image-link" href="/shop/i/turtle/"><img style='background-image: url("https://images.pexels.com/photos/133394/pexels-photo-133394.jpeg");' src="https://cml.sad.ukrd.com/tp/3x2/"></a>
    <div class="flex-text-content">
        <h2 class="flex-text header"><a href="#">textko</a></h2>
        <span class="flex-text price">$12.34</span>
        <span class="flex-text description">text here text here text here text here text here text heret ext here .</span>
    </div>
    <button class="flex-btn" onclick="#'">button</button>
</div>

</div>