クロスブラウザで一貫性のないスクロールバー

Question

この問題を説明する言葉が出にくいです。

例コードはthis fiddleを参照してください。

この問題はjQuery plugin^{を使用して茎から[1]}よりカスタマイズ可能なものとselect要素を交換します。基本的には、絶対配置されたdivの幅を最小にしたい。

リストにスクロールバーがない場合、ブラウザはdivを同じようにレンダリングしているようです。

リストが長すぎる：

• IE9は、他のすべてのブラウザがコンテンツ領域の内側にスクロールバーを追加最小幅
• への追加、コンテンツ領域の外にスクロールバーが追加されます最小幅を維持しながら、必要に応じて水平スクロールバーを追加します。
• 互換モードのIE9は、他のブラウザと同様にスクロールバーの表示に戻ります。

すべてのブラウザで同じようにリストをレンダリングできるようにしたいと考えています。理想的には、ブラウザのハックや条件付きのコメントなしで純粋なCSSソリューションを用意したいと思います。

は、[1]私は「abeautifulsite.net」と提携しない方法で午前

Answer 1

これは言うことができないので、IE9を持っていない、私の中でFF 3.6とIE8のために同じことを表示するように見えます。

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

Answer 2

すべてのブラウザでは、学習したとおりにスクロールバーが異なる方法で処理されます。すべての異なる幅と一部の要素は、使用されていなくても表示されているときに要素の幅に他の要素が追加されている場合でも、要素の幅に既に含まれています。

次のjQueryプラグインjScrollPaneを使用すると、CSSを使用してスクロールバーをカスタマイズできます。あなたがデフォルトスクロールバーを失うので、完璧な解決策ではありません。しかし、プラスの面では、要素の幅を正確にクロスブラウザーで制御できます。

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