Question

我无法让我的垂直滑块在chrome中工作。他们在firefox中运行良好。 Chrome似乎没有正确计算高度，min-height: 100%具体。

我已尝试过一系列不同的解决方案，包括flexbox设置，flex: 1; flex: x x x;，flex-shrink: 0;等，但似乎无法实现灵活组合把它们放在什么地方和哪里。

有人可以为此看到跨浏览器解决方案吗？

（在firefox和chrome中查看小提琴以查看差异.firefox按预期工作）

拨弄

CSS

html { width: 100%; height: 100%; margin: 0; padding: 0; }
body { 
  width: 100%;  height: 100%; margin: 0; padding: 0;
  color: white; font-size: 14px;
  background-color: hsla(66, 8%, 49%, 0.4);
}
div {
  margin: 0; padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.slider {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.slider-blocks-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 300px;
    height: 200px;
    background-color: hsla(0, 0%, 0%, 0.3);
}

.slider-block {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    min-height: 100%; /* this seems to be the bug with chrome */
    transition: margin 0.5s ease;
}
  .slider-block:first-child { 
    margin-top: -100%;
    background-color: hsla(176, 100%, 52%, 0.2);
  }
  .slider-block:nth-child(2) { 
    background-color: hsla(294, 100%, 52%, 0.2);
  }
  .slider-block:last-child { 
    background-color: hsla(63, 100%, 52%, 0.2);
  }

.slider-block-info { text-align: center; }

.slider-block-button {
    display: inline-flex;
    background-color: hsla(0, 0%, 0%, 0.5);
  padding: 2px 4px;
}
  .slider-block-button:hover {
    background-color: hsla(0, 55%, 38%, 0.5);
  }

/* up down buttons */
.slider-control {
    display: inline-flex;
    background-color: hsla(0, 20%, 90%, 0.8); color: black;
    cursor: pointer;
    position: relative;
    z-index: 100;
  padding: 2px 4px;
}
    .slider-control:hover {
        background-color: hsla(0, 55%, 38%, 0.9);
    }
.slider-control-up { margin: 0px auto -26px auto; }
.slider-control-dn { margin: -26px auto 0px auto; }

HTML

<div class="slider">
    <div class="slider-control slider-control-up">up</div>
    <div class="slider-blocks-container">
        <div class="slider-block">
            <div class="slider-block-info">Block 1 information</div>
            <div class="slider-block-button">read more</div>
        </div>
        <div class="slider-block">
            <div class="slider-block-info">Block 2 information (Slider should start here)</div>
            <div class="slider-block-button">read more</div>
        </div>
        <div class="slider-block">
            <div class="slider-block-info">Block 3 information</div>
            <div class="slider-block-button">read more</div>    
        </div>
    </div>
    <div class="slider-control slider-control-dn">down</div>
</div>

解决方法

这是一个长期丑陋的解决方法，使用位置相对/绝对来找到这个问题的未来人类。（需要我将尝试减少的许多特定jquery指令。）

https://jsfiddle.net/Hastig/ju5br7q5/2/

关于原始方法的工作方式（在firefox中）的好处是你只需要弄乱第一个元素的边距就可以向上或向下推动或拉出整个块的块，你可以添加尽可能多的元素如您所愿，使用较少的jquery编辑。

响应式flexbox垂直滑块不在chrome中工作（最小高度百分比）

0 个答案: