CSS overflow-x : visible; 및 overflow-y : hidden; 스크롤바 문제 발생

질문 : CSS overflow-x : 보이는; 및 overflow-y : 숨김; 스크롤바 문제 발생

---

스타일과 마크 업이 있다고 가정합니다.

 

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 및 오페라에서 관찰 (?))

나는 w3c 사양이나 이것이 일어나도록 말하는 무언가가 있어야한다고 생각하고 있지만 내 삶을 위해 나는 이유를 알 수 없습니다.

JSFiddle

업데이트 : - 나는 감싸 다른 요소 추가하여 같은 결과를 acheive 할 수있는 방법을 발견 ul . 확인 해봐.

답변

---

심각한 검색 후 내 질문에 대한 답을 찾은 것 같습니다.

에서 : 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'의 계산 된 값은 'overflow-y'가 같으면 'overflow-x'의 계산 된 값과 같습니다. 그렇지 않으면 'overflow-x'와 'overflow-y'의 계산 된 값 쌍입니다.

짧은 버전 :

당신이 사용하는 경우 visible 하나에 대한 overflow-x 또는 overflow-y 및 이외의 visible 다른 들어, visible 값으로 해석됩니다 auto .

출처 : https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue