Flex 래퍼는 IE에서 flexbox를 사용하여 100 % 너비를 얻습니다.

Question

JavaScript로 슬라이더를 만들었습니다. Chrome과 Firefox에서는 제대로 작동하지만 Internet Explorer에서는 제대로 작동하지 않습니다.

모두 slider_items을 포함하는 래퍼는 슬라이더 div보다 넓으며 화살표를 클릭하면 래퍼 위치 (왼쪽/오른쪽)가 변경됩니다. Internet Explorer의 래퍼 너비가 자동으로 기본 슬라이더 div를 100 %로 설정하는 이유를 모르겠습니다.

누구나 나를 도와 줄 수 있습니까?

var left_arrow = document.querySelector(".slider_arrow-left"), 
 
     right_arrow = document.querySelector(".slider_arrow-right"), 
 
     slider_items = document.querySelectorAll(".slider_item"), 
 
     slider_items_wrapper = document.querySelector(".slider_items_wrapper"), 
 
     slider_pages = Math.ceil(slider_items.length/5), 
 
     wrapper_position_left = 0, 
 
     position = 1, 
 
     section_w = document.querySelector(".o-slider").offsetWidth, 
 
     wrapper_position_right = (slider_pages - 1) * -section_w; 
 
    
 
    var hide_arrows = function() { 
 
     if (position == 1) { 
 
      left_arrow.style.display = "none"; 
 
     } else { 
 
      left_arrow.style.display = "block"; 
 
     } 
 
     
 
     if (position == slider_pages) { 
 
      right_arrow.style.display = "none"; 
 
     } else { 
 
      right_arrow.style.display = "block"; 
 
     } 
 
    } 
 

 
    var tighten_items = function() { 
 
     for (var i = (position-1) * 5 - 1; i <= position * 5; i++) { 
 
      if(i >= 0 && i < slider_items.length) { 
 
       slider_items[i].style.margin = "0 5px"; 
 
      } 
 
     } 
 
    } 
 

 
    var reset_margins = function() { 
 
     for(var i=0; i<slider_items.length; i++) { 
 
      slider_items[i].style.margin = ""; 
 
     } 
 
    } 
 

 
    right_arrow.addEventListener("click", function() { 
 
     position++; 
 
     hide_arrows(); 
 
     wrapper_position_left = wrapper_position_left - section_w; 
 
     wrapper_position_right = wrapper_position_right + section_w; 
 
     slider_items_wrapper.style.right = ""; 
 
     slider_items_wrapper.style.left = wrapper_position_left + "px"; 
 
     reset_margins(); 
 
     if(position!=slider_pages) { 
 
      tighten_items(); 
 
     } 
 
    }) 
 

 
    left_arrow.addEventListener("click", function() { 
 
     if (position != 1) { 
 
      position--; 
 
      hide_arrows(); 
 
      wrapper_position_right = wrapper_position_right - section_w; 
 
      wrapper_position_left = wrapper_position_left + section_w; 
 
      slider_items_wrapper.style.left = ""; 
 
      slider_items_wrapper.style.right = wrapper_position_right + "px"; 
 
      reset_margins(); 
 
      if(position!=1) { 
 
       tighten_items(); 
 
      } 
 
     } 
 
    }) 
 

 
    right_arrow.addEventListener("mouseenter", function() { 
 
     slider_items_wrapper.style.left = wrapper_position_left + "px"; 
 
     slider_items_wrapper.style.right = ""; 
 
     tighten_items(); 
 
    }); 
 

 
    left_arrow.addEventListener("mouseenter", function() { 
 
     slider_items_wrapper.style.right = wrapper_position_right + "px"; 
 
     slider_items_wrapper.style.left = ""; 
 
     tighten_items();  
 
    }); 
 

 
    right_arrow.addEventListener("mouseleave", function() { 
 
     reset_margins(); 
 
    }) 
 
    left_arrow.addEventListener("mouseleave", function() { 
 
     reset_margins(); 
 
    })

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body{ 
 
    background-color: grey; 
 
} 
 

 
.o-slider { 
 
    margin: 20px auto; 
 
    border: 1px solid black; 
 
    width: 1200px; 
 
    height: 250px; 
 
    position: relative; 
 
    display:-webkit-box; 
 
    display:-ms-flexbox; 
 
    display:flex; 
 
    -webkit-box-pack: justify; 
 
    -ms-flex-pack: justify; 
 
      justify-content: space-between; 
 
    overflow: hidden; 
 
    background:#fff; 
 
    padding: 20px 0; 
 
} 
 

 
.slider_items_wrapper { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    position: absolute; 
 
    -webkit-transition: all 0.6s ease; 
 
    transition: all 0.6s ease; 
 
} 
 

 
.slider_item { 
 
    height: 250px; 
 
    width: 200px; 
 
    margin: 0 20px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
      align-items: center; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-direction: column; 
 
      flex-direction: column; 
 
    position: relative; 
 
    -webkit-transition: all 0.4s ease; 
 
    transition: all 0.4s ease; 
 
} 
 

 
.slider_item img { 
 
    width: 200px; 
 
    height: auto; 
 
    max-height: 80%; 
 
} 
 

 
.slider_arrow { 
 
    position: absolute; 
 
    top: calc(50% - 25px); 
 
    height: 50px; 
 
    width: 50px; 
 
    border-radius: 50%; 
 
    border: 1px solid #ccc; 
 
    background-color: #fff; 
 
    color: #888; 
 
    font-size: 25px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    font-weight: 700; 
 
    z-index:1; 
 
    cursor: pointer; 
 
    margin: 0 5px; 
 
} 
 

 
.slider_arrow-right { 
 
    right:0; 
 
} 
 

 
.slider_item_mask-light{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: rgba(0, 0, 0, 0.03); 
 
} 
 

 
.slider_item_mask-dark { 
 
    opacity: 0; 
 
    background-color: rgba(255,255,255, 0.8); 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top:0; 
 
    left:0; 
 
    -webkit-transition: opacity 0.1s ease; 
 
    transition: opacity 0.1s ease; 
 
    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; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-direction: column; 
 
      flex-direction: column; 
 
} 
 

 
.slider_item_mask-dark button { 
 
    color: #fff; 
 
    background-color: #000; 
 

 
} 
 

 
.slider_item_mask-dark:hover { 
 
    opacity: 1; 
 
    -webkit-transition: opacity 0.1s ease; 
 
    transition: opacity 0.1s ease; 
 
} 
 

 
.slider_item_mask-dark:hover ~ button { 
 
    display:none; 
 
} 
 

 
button { 
 
    background-color:transparent;; 
 
    border:1px solid #000; 
 
    border-radius:1px; 
 
    font-weight: 700; 
 
    padding:7px; 
 
    -webkit-transition: all 0.4s ease; 
 
    transition: all 0.4s ease; 
 
    width: 100px; 
 
    position: absolute; 
 
    left: calc(50% - 50px); 
 
    bottom: 20px; 
 
} 
 

 
.item_partner, 
 
.item_name { 
 
    font-family: "Arial", sans-serif; 
 
    padding-bottom: 15px; 
 
    color: #000; 
 
    font-size: 14px; 
 
} 
 

 
.item_partner { 
 
    text-transform: uppercase; 
 
} 
 

 
.item_name { 
 
    text-transform: capitalize; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="o-slider"> 
 
      <div class="slider_arrow slider_arrow-left" style="display:none;">&lt;</div> 
 
      <ul class="slider_items_wrapper"> 
 
       <li class="slider_item"> 
 
        <img src="http://images.okazje.info.pl/p/odziez-i-obuwie/2897/kuznia-srebra-zestaw-bizuterii-obraczka-i-pierscionek-z-iolitem-rozm-16.jpg" /> 
 
        <a href="#"> 
 
         <div class="slider_item_mask-light"></div> 
 
         <div class="slider_item_mask-dark"> 
 
          <strong class="item_partner">ivy &amp; oak layering</strong> 
 
          <strong class="item_name">koszula - blush</strong> 
 
          <button> 
 
           Przedmiot 0 
 
          </button> 
 
         </div> 
 
         <button> 
 
          Przedmiot 0 
 
         </button> 
 
        </a> 
 
       </li> 
 
       <li class="slider_item"> 
 
        <img src="http://images.okazje.info.pl/p/odziez-i-obuwie/2897/kuznia-srebra-zestaw-bizuterii-obraczka-i-pierscionek-z-iolitem-rozm-16.jpg" /> 
 
        <a href="#"> 
 
         <div class="slider_item_mask-light"></div> 
 
         <div class="slider_item_mask-dark"> 
 
          <strong class="item_partner">ivy &amp; oak layering</strong> 
 
          <strong class="item_name">koszula - blush</strong> 
 
          <button> 
 
           Przedmiot 1 
 
          </button> 
 
         </div> 
 
         <button> 
 
          Przedmiot 1 
 
         </button> 
 
        </a> 
 
       </li> 
 
       <li class="slider_item"> 
 
        <img src="http://images.okazje.info.pl/p/odziez-i-obuwie/2897/kuznia-srebra-zestaw-bizuterii-obraczka-i-pierscionek-z-iolitem-rozm-16.jpg" /> 
 
        <a href="#"> 
 
         <div class="slider_item_mask-light"></div> 
 
         <div class="slider_item_mask-dark"> 
 
          <strong class="item_partner">ivy &amp; oak layering</strong> 
 
          <strong class="item_name">koszula - blush</strong> 
 
          <button> 
 
           Przedmiot 2 
 
          </button> 
 
         </div> 
 
         <button> 
 
          Przedmiot 2 
 
         </button> 
 
        </a> 
 
       </li> 
 
       <li class="slider_item"> 
 
        <img src="http://images.okazje.info.pl/p/odziez-i-obuwie/2897/kuznia-srebra-zestaw-bizuterii-obraczka-i-pierscionek-z-iolitem-rozm-16.jpg" /> 
 
        <a href="#"> 
 
         <div class="slider_item_mask-light"></div> 
 
         <div class="slider_item_mask-dark"> 
 
          <strong class="item_partner">ivy &amp; oak layering</strong> 
 
          <strong class="item_name">koszula - blush</strong> 
 
          <button> 
 
           Przedmiot 3 
 
          </button> 
 
         </div> 
 
         <button> 
 
          Przedmiot 3 
 
         </button> 
 
        </a> 
 
       </li> 
 
       <li class="slider_item"> 
 
        <img src="http://images.okazje.info.pl/p/odziez-i-obuwie/2897/kuznia-srebra-zestaw-bizuterii-obraczka-i-pierscionek-z-iolitem-rozm-16.jpg" /> 
 
        <a href="#"> 
 
         <div class="slider_item_mask-light"></div> 
 
         <div class="slider_item_mask-dark"> 
 
          <strong class="item_partner">ivy &amp; oak layering</strong> 
 
          <strong class="item_name">koszula - blush</strong> 
 
          <button> 
 
           Przedmiot 4 
 
          </button> 
 
         </div> 
 
         <button> 
 
          Przedmiot 4 
 
         </button> 
 
        </a> 
 
       </li> 
 
       <li class="slider_item"> 
 
        <img src="http://images.okazje.info.pl/p/odziez-i-obuwie/2897/kuznia-srebra-zestaw-bizuterii-obraczka-i-pierscionek-z-iolitem-rozm-16.jpg" /> 
 
        <a href="#"> 
 
         <div class="slider_item_mask-light"></div> 
 
         <div class="slider_item_mask-dark"> 
 
          <strong class="item_partner">ivy &amp; oak layering</strong> 
 
          <strong class="item_name">koszula - blush</strong> 
 
          <button> 
 
           Przedmiot 5 
 
          </button> 
 
         </div> 
 
         <button> 
 
          Przedmiot 5 
 
         </button> 
 
        </a> 
 
       </li> 
 
       <li class="slider_item"> 
 
        <img src="http://images.okazje.info.pl/p/odziez-i-obuwie/2897/kuznia-srebra-zestaw-bizuterii-obraczka-i-pierscionek-z-iolitem-rozm-16.jpg" /> 
 
        <a href="#"> 
 
         <div class="slider_item_mask-light"></div> 
 
         <div class="slider_item_mask-dark"> 
 
          <strong class="item_partner">ivy &amp; oak layering</strong> 
 
          <strong class="item_name">koszula - blush</strong> 
 
          <button> 
 
           Przedmiot 6 
 
          </button> 
 
         </div> 
 
         <button> 
 
          Przedmiot 6 
 
         </button> 
 
        </a> 
 
       </li> 
 
       <li class="slider_item"> 
 
        <img src="http://images.okazje.info.pl/p/odziez-i-obuwie/2897/kuznia-srebra-zestaw-bizuterii-obraczka-i-pierscionek-z-iolitem-rozm-16.jpg" /> 
 
        <a href="#"> 
 
         <div class="slider_item_mask-light"></div> 
 
         <div class="slider_item_mask-dark"> 
 
          <strong class="item_partner">ivy &amp; oak layering</strong> 
 
          <strong class="item_name">koszula - blush</strong> 
 
          <button> 
 
           Przedmiot 7 
 
          </button> 
 
         </div> 
 
         <button> 
 
          Przedmiot 7 
 
         </button> 
 
        </a> 
 
       </li> 
 
       <li class="slider_item"> 
 
        <img src="http://images.okazje.info.pl/p/odziez-i-obuwie/2897/kuznia-srebra-zestaw-bizuterii-obraczka-i-pierscionek-z-iolitem-rozm-16.jpg" /> 
 
        <a href="#"> 
 
         <div class="slider_item_mask-light"></div> 
 
         <div class="slider_item_mask-dark"> 
 
          <strong class="item_partner">ivy &amp; oak layering</strong> 
 
          <strong class="item_name">koszula - blush</strong> 
 
          <button> 
 
           Przedmiot 8 
 
          </button> 
 
         </div> 
 
         <button> 
 
          Przedmiot 8 
 
         </button> 
 
        </a> 
 
       </li> 
 
       <li class="slider_item"> 
 
        <img src="http://images.okazje.info.pl/p/odziez-i-obuwie/2897/kuznia-srebra-zestaw-bizuterii-obraczka-i-pierscionek-z-iolitem-rozm-16.jpg" /> 
 
        <a href="#"> 
 
         <div class="slider_item_mask-light"></div> 
 
         <div class="slider_item_mask-dark"> 
 
          <strong class="item_partner">ivy &amp; oak layering</strong> 
 
          <strong class="item_name">koszula - blush</strong> 
 
          <button> 
 
           Przedmiot 9 
 
          </button> 
 
         </div> 
 
         <button> 
 
          Przedmiot 9 
 
         </button> 
 
        </a> 
 
       </li> 
 
       <li class="slider_item"> 
 
        <img src="http://images.okazje.info.pl/p/odziez-i-obuwie/2897/kuznia-srebra-zestaw-bizuterii-obraczka-i-pierscionek-z-iolitem-rozm-16.jpg" /> 
 
        <a href="#"> 
 
         <div class="slider_item_mask-light"></div> 
 
         <div class="slider_item_mask-dark"> 
 
          <strong class="item_partner">ivy &amp; oak layering</strong> 
 
          <strong class="item_name">koszula - blush</strong> 
 
          <button> 
 
           Przedmiot 10 
 
          </button> 
 
         </div> 
 
         <button> 
 
          Przedmiot 10 
 
         </button> 
 
        </a> 
 
       </li> 
 
       <li class="slider_item"> 
 
        <img src="http://images.okazje.info.pl/p/odziez-i-obuwie/2897/kuznia-srebra-zestaw-bizuterii-obraczka-i-pierscionek-z-iolitem-rozm-16.jpg" /> 
 
        <a href="#"> 
 
         <div class="slider_item_mask-light"></div> 
 
         <div class="slider_item_mask-dark"> 
 
          <strong class="item_partner">ivy &amp; oak layering</strong> 
 
          <strong class="item_name">koszula - blush</strong> 
 
          <button> 
 
           Przedmiot 11 
 
          </button> 
 
         </div> 
 
         <button> 
 
          Przedmiot 11 
 
         </button> 
 
        </a> 
 
       </li> 
 
       <li class="slider_item"> 
 
        <img src="http://images.okazje.info.pl/p/odziez-i-obuwie/2897/kuznia-srebra-zestaw-bizuterii-obraczka-i-pierscionek-z-iolitem-rozm-16.jpg" /> 
 
        <a href="#"> 
 
         <div class="slider_item_mask-light"></div> 
 
         <div class="slider_item_mask-dark"> 
 
          <strong class="item_partner">ivy &amp; oak layering</strong> 
 
          <strong class="item_name">koszula - blush</strong> 
 
          <button> 
 
           Przedmiot 12 
 
          </button> 
 
         </div> 
 
         <button> 
 
          Przedmiot 12 
 
         </button> 
 
        </a> 
 
       </li> 
 
       <li class="slider_item"> 
 
        <img src="http://images.okazje.info.pl/p/odziez-i-obuwie/2897/kuznia-srebra-zestaw-bizuterii-obraczka-i-pierscionek-z-iolitem-rozm-16.jpg" /> 
 
        <a href="#"> 
 
         <div class="slider_item_mask-light"></div> 
 
         <div class="slider_item_mask-dark"> 
 
          <strong class="item_partner">ivy &amp; oak layering</strong> 
 
          <strong class="item_name">koszula - blush</strong> 
 
          <button> 
 
           Przedmiot 13 
 
          </button> 
 
         </div> 
 
         <button> 
 
          Przedmiot 13 
 
         </button> 
 
        </a> 
 
       </li> 
 
       <li class="slider_item"> 
 
        <img src="http://images.okazje.info.pl/p/odziez-i-obuwie/2897/kuznia-srebra-zestaw-bizuterii-obraczka-i-pierscionek-z-iolitem-rozm-16.jpg" /> 
 
        <a href="#"> 
 
         <div class="slider_item_mask-light"></div> 
 
         <div class="slider_item_mask-dark"> 
 
          <strong class="item_partner">ivy &amp; oak layering</strong> 
 
          <strong class="item_name">koszula - blush</strong> 
 
          <button> 
 
           Przedmiot 14 
 
          </button> 
 
         </div> 
 
         <button> 
 
          Przedmiot 14 
 
         </button> 
 
        </a> 
 
       </li> 
 
      </ul> 
 
       <div class="slider_arrow slider_arrow-right">&gt;</div> 
 
     </div> 
 
</body> 
 
</html>

IE를 들어

Answer 1

, 당신은 flex-shrink을 사용하지 않도록 할 수 있습니다.

flex-shrink: 0부터 .slider-item까지.

https://jsfiddle.net/qsa8nan2/1/