跨浏览器滚动条不一致答案

【问题标题】：Cross-browser Inconsistent Scrollbars跨浏览器滚动条不一致
【发布时间】：2011-06-21 04:10:59
【问题描述】：

我很难用词来形容这个问题。

示例代码请参见this fiddle。

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

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

当列表太长时：

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

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

[1]我绝不隶属于“abeautifulsite.net”

【问题讨论】：

你为什么使用最小宽度而不是宽度？
@AR，如果select box has a very long name 中的某个项目，我希望下拉菜单自动展开以适合该项目，但如果列表包含短，我还需要防止选择框缩小名字。

标签： jquery css cross-browser scrollbar internet-explorer-9

【解决方案1】：

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

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

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

【讨论】：

【解决方案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;
}

【讨论】：

此解决方案在 IE9 中仍然会导致问题。