Question

我不确定在Firefox中搞砸了什么。我在Chrome中看到了滚动条。但不是在Firefox中。由于webkit只影响Safari / Chrome，我不确定是什么干扰了溢出中未显示的滚动条：auto divs。

因为我知道如果我在区域内点击它会滚动，我可以滚动...

HTML

<div class="memrow">
    <div class="meml">asdf</div>
    <div class="memm">
        <div class="memmc">
            <center>asdf</center>
            <a href="URL">asdf</a>
            asdf
        </div>    
    </div>
    <div class="memr">
        <div class="memrc">
            <a href="/">asdf</a>
        </div>
    </div>
</div>

CSS

.memrow {
    background-color: #3E0056;
    background-image: url('http://transmute.b1.jcink.com/uploads/transmute//statsbg.png');
    background-position: center bottom;
    background-size: 698px;
    border: 1px solid #f2f2f2;
    line-height: 100%;
    margin-bottom: 20px;
    padding: 10px 0px;
}

.meml, .memr, .memm {
    display: inline-block;
    vertical-align: middle;
    padding: 20px 15px;
    position: relative;
    width: 160px;
}

.memm {
    padding: 15px 85px;
    color: #fff;
    width: 125px;
    font-family: 'Montserrat';
    font-size: 8px;
}

.memm a {
    color: #fff;
    text-transform: uppercase;
    display: block;
    text-align: center;
}

.meml {
    font-family: 'Quantico';
    font-size: 20px;
    padding: 22px 15px;
    background-color: #f2f2f2;
}

.meml:after {
    content:"";
    position: absolute;
    right: -55px;
    top: 0px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 55px 0 0 55px;
    border-color: transparent transparent transparent #f2f2f2;
}

.memr {
    background-color: #f22b55;
    padding: 15px;
    padding-bottom: 16px;
    width: 183px;
    min-height: 25px;
}

.memr a {
    color: #3E0056;
    text-transform: uppercase;
    display: block;
}

.memr a:hover {
    color: #02FF97;
}

.memr:after {
    content: "";
    position: absolute;
    left: -55px;
    top: 0px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 55px 55px 0;
    border-color: transparent #f22b55 transparent transparent;
}

.memrc, .memmc {
    max-height: 25px;
    overflow: auto;
    line-height: 150%;
    padding-right: 5px;
    z-index: 50;
}

.memmc::-webkit-scrollbar,
.memrc::-webkit-scrollbar {
    width: 5px;
}

.memmc::-webkit-scrollbar-track,
.memrc::-webkit-scrollbar-track {
    background-color: rgba(62,0,86,0.5);
}

.memmc::-webkit-scrollbar-thumb,
.memrc::-webkit-scrollbar-thumb {
    background-color: #fff;
    border: 0px solid #F22B55;
}

这是我的JSfiddle：https://jsfiddle.net/885m9uuL/。起初我以为它是另一个div的z-index但是当我把它放在JSfiddle中时，似乎有同样的问题。

Answer 1

设置overflow: scroll;可以解决问题。这将显示滚动条，即使它们不需要。 overflow: auto;会告诉浏览器决定显示或隐藏滚动条，在您的情况下，Firefox不会显示滚动条，但您可以滚动。

Firefox Scrollbar未在DIV中显示

1 个答案: