flexbox需要在IE 11中溢出

Question

我有一個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> 

Answer 1

如果從.testimonials刪除flex屬性並添加這3個屬性，則在跨瀏覽器中將獲得相同的結果，其中各項居中並向左/向右平均溢出

  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>