跨浏览器不一致的滚动条

Question

我很难想出用这个词来描述这个问题。

请参阅this fiddle以获取示例代码。

这个问题源于使用jQuery plugin ^[1] 将select元素替换为更可自定义的元素。基本上，我希望绝对定位的div具有最小宽度。

当列表没有滚动条时，浏览器似乎会以相同的方式呈现div。

当列表太长时：

• IE9将滚动条添加到内容区域的外部，添加到最小宽度
• 所有其他浏览器将滚动条添加到内容区域的内部，保持最小宽度，同时在必要时添加水平滚动条。
• 兼容模式下的IE9将恢复为与其他浏览器类似的显示滚动条。

我希望能够为所有浏览器呈现相同的列表。理想情况下，我希望有一个纯CSS解决方案，没有任何浏览器黑客或条件评论。

[1] 我与“abeautifulsite.net”没有任何关系

Answer 1

所有浏览器都会以您不同的方式处理滚动条。所有不同的宽度和一些宽度已经包含在元素宽度中，即使它们没有被使用，而当其他元素出现时会将其他宽度添加到元素的宽度中。

使用以下jQuery插件jScrollPane，您可以使用CSS自定义滚动条。它不是一个完美的解决方案，因为你将失去任何默认的滚动条。但从好的方面来说，您可以对元素宽度进行精确的跨浏览器控制。

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

Answer 2

这似乎对我在FF 3.6和IE8中显示相同，没有IE9所以说不清楚：

  #scroll
{
border:  5px  solid #000;
height: 100px;
left:  0;
padding: 10px;
position: absolute;
top:  0;
min-width: 100px;
overflow-y:  scroll;
overflow-x:  visible;
}