【发布时间】：2017-09-19 19:24:39
【问题描述】：
我有一个 flexbox，它的左侧和右侧的子元素都应该溢出。这是我用于此解决方案的代码。它在所有浏览器中都能正常工作，但在 IE 11 中不起作用（子级仅将 flexbox 溢出到右侧）。
我尝试使用overflow-x:visible 解决该部分和列表的问题，但它不起作用。正文中的overflow-x 属性隐藏了水平滚动，这对我的任务来说没问题。如您所见，我已经为我的 CSS 使用了 autoprefixer，但我没有在前缀中找到解决方案。这是 IE flexbox 溢出的特殊行为吗？ :)
所以我的问题是为什么我的解决方案在 IE 11 中不起作用，我该怎么做才能解决这个问题？
body{
width: 1400px;
margin: 0 auto;
font-family: "Open Sans", "Arial", sans-serif;
overflow-x: hidden;
font-size: 16px;
line-height: 24px;
color: #999;
}
.visually-hidden{
position: absolute;
clip: rect(0,0,0,0);
width: 1px;
height: 1px;
}
.testimonials{
position: relative;
height: 576px;
background-color: #fafafa;
background-image: url("../img/quotes.png"),
url("../img/quotes-reversed.png"),
url("../img/worldmap.png"),
url("../img/worldmap.png");
background-repeat: no-repeat;
background-position: 115px 60px,
1140px 380px, -290px 205px, 530px -270px;
background-size: auto, auto, auto, auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow-x: visible;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 100px;
}
.reviews-catalog{
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 160px;
overflow-x: visible;
}
.review{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
min-width: 470px;
height:243px;
background-color: white;
margin-left: 15px;
margin-right: 15px;
-webkit-box-shadow: 0px 3px 18px 0px rgba(0, 153, 255, 0.1);
box-shadow: 0px 3px 18px 0px rgba(0, 153, 255, 0.1);
}
.review:first-of-type{
margin-left: 0px;
}
.review:last-of-type{
margin-right: 0px;
}
.review:first-of-type::before,
.review:last-of-type::before{
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: 0.6;
}
.review:first-of-type .review-photo,
.review:last-of-type .review-photo{
opacity: 0.6;
}
.review:first-of-type:hover .review-photo,
.review:last-of-type:hover .review-photo{
opacity: 1;
}
.review:first-of-type:hover::before,
.review:last-of-type:hover::before{
opacity: 0;
}
.review-photo{
display: block;
border-radius: 50%;
margin-top: -45px;
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.review-author{
margin: 0;
margin-top: 30px;
color: black;
font-size: 16px;
font-weight: 600;
line-height: 24px;
}
.review-content{
margin: 0;
margin-top: 15px;
text-align: center;
max-width: 370px;
color: black;
}<section class="testimonials">
<h2 class="visually-hidden">Other reviews</h2>
<ul class="reviews-catalog">
<li class="review">
<h3 class="review-author">Kevin Smith,</h3>
<p class="role">Pediatrics student</p>
<p class="review-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img class="review-photo" src="img/kevin.png" alt="kevin's avatar" width="90" height="90"/>
</li>
<li class="review">
<h3 class="review-author">Kevin Smith,</h3>
<p class="role">Pediatrics student</p>
<p class="review-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img class="review-photo" src="img/kevin.png" alt="kevin's avatar" width="90" height="90"/>
</li>
<li class="review">
<h3 class="review-author">Jane Lambert,</h3>
<p class="role">Psychiatry student</p>
<p class="review-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img class="review-photo" src="img/jane.png" alt="jane's avatar" width="90" height="90"/>
</li>
<li class="review">
<h3 class="review-author">Jane Lambert,</h3>
<p class="role">Psychiatry student</p>
<p class="review-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img class="review-photo" src="img/jane.png" alt="jane's avatar" width="90" height="90"/>
</li>
</ul>
</section>【问题讨论】：
-
在从左到右的书写模式下，没有向左溢出的情况。 stackoverflow.com/a/38830775/3597276
-
支持G-Chrome、FFox等，书写方式无任何变化，左侧有溢出。我不认为像
rtl这样的溢出方向变化是解决方案，因为它会导致另一个问题（然后它会溢出到左边而不是右边，同样的问题）。我只需要更正 IE 11 的现有解决方案。 -
可以渲染一个向左移动的滚动条。我的观点是这样的函数不是溢出。它只是专门的滚动。溢出只能发生在写模式的方向上。