在IE中，Flex包装器使用flexbox获得100％宽度

Posted 2021-03-31

我用javascript创建了一个滑块。它适用于Chrome和Firefox，但不适用于Internet Explorer。

保持所有slider_items的包装器比滑块div宽，当单击箭头时，我更改包装器位置（左/右）。我不知道为什么包装器宽度自动设置为100％填充Internet Explorer中的主滑块div。

任何人都可以帮我这个吗？

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，您可能需要禁用flex-shrink。

将flex-shrink: 0添加到.slider-item。

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