跨浏览器滚动条不一致

Question

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

请参阅此小提琴获取示例代码。

此问题源于使用 jQuery 插件^[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;
}