☰

CSS の overflow-x: visible; と overflow-y: hidden; によりスクロールバーに問題が発生する 質問する

tag-icon • tag-icon html css overflow
CSS の overflow-x: visible; と 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 の表示と非表示の値を指定しているにもかかわらず、下部にスクロール バーが表示されます。

(Chrome 11 および Opera (?) で確認)

これが起こるように指示する W3C 仕様か何かがあるはずだと推測していますが、その理由がどうしてもわかりません。

JSFiddle

更新:-を囲む別の要素を追加することで、同じ結果を達成する方法を見つけましたul。それをチェックしてください。

ベストアンサー1

真剣に検索した結果、私の質問に対する答えが見つかったようです。

から：http://www.brunildo.org/test/Overflowxy2.html

Gecko、Safari、Opera では、「visible」は「hidden」と組み合わせた場合も「auto」になります (言い換えると、「visible」は「visible」以外の何かと組み合わせた場合「auto」になります)。Gecko 1.8、Safari 3、Opera 9.5 は、それらの間でかなり一貫しています。

また、W3C仕様言う：

'overflow-x' と 'overflow-y' の計算値は、'visible' との組み合わせが一部不可能なことを除いて、指定された値と同じです。一方が 'visible' に指定され、もう一方が 'scroll' または 'auto' に指定されている場合、'visible' は 'auto' に設定されます。'overflow-y' が同じ場合、'overflow' の計算値は 'overflow-x' の計算値と等しくなります。それ以外の場合は、'overflow-x' と 'overflow-y' の計算値のペアになります。

短縮版：

またはのvisibleいずれかに を使用し、他方には 以外のものを使用している場合、値は として解釈されます。overflow-xoverflow-yvisiblevisibleauto

おすすめ記事