[解決済み] CSS overflow-x: visible; and overflow-y: hidden; によるスクロールバーの不具合について

質問

あるスタイルとマークアップがあるとします。

ul
{
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
/* added width so it would work in the snippet */
  width: 100px; 
}
li
{
  display: inline-block;
}

<div>
  <ul>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
  </ul>
</div>

これを表示すると が表示されます。 <ul> は、オーバーフローx/yに可視と非表示の値を指定しているにもかかわらず、下部にスクロールバーが表示されています。

(Chrome11とoperaで観測(?))

w3cの仕様か何かでこうなるように指示されているのだろうと思いますが、どうしても理由がわかりません。

JSFiddle

UPDATE:-」。 を囲むように別の要素を追加することで、同じ結果を得る方法を発見しました。 ul . 確認してみてください。

解決方法は？

いろいろと探しているうちに、私の疑問に対する答えが見つかったようです。

からです。 http://www.brunildo.org/test/Overflowxy2.html

Gecko、Safari、Operaでは、'visible' が表示されます。 と組み合わせても「自動」になります。 'hidden' （言い換えれば。'visible' は と組み合わせると'auto'になります。 とは異なるもの 'visible')。Gecko 1.8、Safari 3、Opera 9.5がその中でかなり一貫しています。

も、その W3C仕様 と書かれています。

計算された 'overflow-x' の値です。 と 'overflow-y' はそれらの 指定された値。 可視」との組み合わせは として指定された場合 'visible' で、もう一方が 'scroll' または 'auto' の場合、'visible' に設定されます。 'auto'です。の計算値は overflow' は、計算された の値は、'overflow-y' の場合は 'overflow-x' の値です。 は同じで、そうでない場合は を計算した値です。 'overflow-y' とする。

ショートバージョンです。

を使用している場合 visible のどちらかに対して overflow-x または overflow-y と、それ以外のもの visible を、もう一方には visible の値は、次のように解釈されます。 auto .