我有一个 flexbox 应该被它的 child 溢出到左边和右边。这是我的这个解决方案的代码。它在所有浏览器中都能正常工作,但在 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>
最佳答案
如果您从 .testimonials
中删除 flex 属性并添加这 3 个,您将在跨浏览器中获得相同的结果,其中元素 center 和 overflow 左右均等
display: inline-block;
left: 50%;
transform: translateX(-50%);
它的工作原理是这样的,inline-block
根据内容调整大小,left: 50%
(连同已经设置的 position: relative
) 将其左边缘定位在其父级的中间,在本例中为 body
,transform: translateX(-50%)
会将其移动 50其自身宽度向左的百分比。
堆栈片段
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;
*/
display: inline-block; /* added */
left: 50%; /* added */
transform: translateX(-50%); /* added */
}
.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>
关于html - Flexbox 需要在 IE 11 中溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46298190/