为什么Firefox有不同的滚动条外观

Question

我遇到了以下问题-在Firefox浏览器中，滚动条的外观不同，它被放置在div中，并更改了ul的宽度。

演示：https://jsfiddle.net/zmatj6s9/

我正试图弄清楚，在两个浏览器中，我应该更改什么以获得相同的布局。有什么想法吗？

.a {
width: 40px;
height: 40px;
background: red;
}
.ul {
height: 100%;
list-style: none;
margin: 0;
padding: 12px;;
}
.parent {
display: flex;
}
.content {
width: 100%;
background: brown
}
.sidebar {
overflow: auto;
height: 200px;
flex: none;
}

<div class='parent'>
<div class='sidebar'>
<ul class='ul'>
<li>
<a>
<div class='a'>
</div>
</a>
</li>
<li>
<a>
<div class='a'>
</div>
</a>
</li>
<li>
<a>
<div class='a'>
</div>
</a>
</li>
<li>
<a>
<div class='a'>
</div>
</a>
</li>
<li>
<a>
<div class='a'>
</div>
</a>
</li>
<li>
<a>
<div class='a'>
</div>
</a>
</li>
<li>
<a>
<div class='a'>
</div>
</a>
</li>
<li>
<a>
<div class='a'>
</div>
</a>
</li>
<li>
<a>
<div class='a'>
</div>
</a>
</li>
</ul>
</div>
<div class='content'>

</div>
</div>

Answer 1

也许这不是您想要的解决方案，而是一种方法。如果你只是将ul扩展几个像素并隐藏溢出的内容，你就可以滚动，根本看不到任何滚动条。

正如我所说，也许这不是解决方案，但我有时会在项目中应用，效果很好。你总是可以使用一些滚动条插件，但如果你想在平面css中使用它，我认为这是更接近的解决方案。希望对你有帮助。

.parent {
display: flex;
flex-flow: row warp;
justify-content: flex-start;
}
.content {
flex: 1 0 0%;
background: brown;
}
.sidebar {
flex: 0 0 20%;
height: 200px;
overflow: hidden;
}
.sidebar ul {
width: calc(100% + 25px);
height: 100%;
list-style: none;
margin: 0;
padding: 0 10px;
background: red;
overflow: hidden;
overflow-y: scroll;
}
.sidebar ul li {
padding: 5px 10px;
padding-right: 35px;
}
.sidebar ul li a {
display: inline-block;
}

<div class='parent'>
<div class='sidebar'>
<ul>
<li>
<a href="">ELEMENT 1</a>
</li>
<li>
<a href="">ELEMENT 2</a>
</li>
<li>
<a href="">ELEMENT 3</a>
</li>
<li>
<a href="">ELEMENT 4</a>
</li>
<li>
<a href="">ELEMENT 5</a>
</li>
<li>
<a href="">ELEMENT 6</a>
</li>
<li>
<a href="">ELEMENT 7</a>
</li>
<li>
<a href="">ELEMENT 8</a>
</li>
<li>
<a href="">ELEMENT 9</a>
</li>
</ul>
</div>
<div class='content'>
hello
</div>
</div>

此外，我还清理了您的代码，因为您有一些不必要的DOM元素，至少在本例中是这样。