2010-03-09 9 views
1

div가 overflow : auto, 최대 너비 250px로 설정되었습니다.IE7에서 사라지는 스크롤 막대

div 안에는 사용자가 10, 20, 50 또는 100 개의 결과를 되돌릴 수있는 페이징 컨트롤이 있습니다. 그들이 결과를 충분히 끌어 당기면 내부 내용 (표)이 div보다 커져서 스크롤 할 수있게됩니다.

Firefox 3.5와 IE8에서는 잘 작동하지만 IE7에서는 스크롤바가 필요한 첫 번째 포스트 백 이후에만 스크롤바가 표시됩니다 (예 : 20 사용자 선택). 그런 다음 사용자가 스크롤 막대 (50, 100)가 필요한 다른 금액을 선택하면 IE7의 막대가 사라집니다.

사용자가 10 개의 결과 (스크롤 필요 없음)로 이동 한 다음 20 개의 결과 (스크롤 필요)로 진행하면 스크롤바가 IE7에 다시 표시됩니다.

내 마우스 휠로 내부 콘텐츠를 스크롤 할 수 있지만 스크롤바 만 있습니다.

누구든지 문제가 무엇인지 알 수 있습니까? 나는 곤란하다 ... 필요한 경우 세부 사항을 제공 할 수있다.

설명 : 콘텐츠가 Div에 넘치더라도 스크롤 막대가 사라집니다.

답변

0

변경 scroll

-auto에서 CSS 속성 overflow

+0

예, 이것은 최후의 수단 솔루션입니다. 이 문제는 내부 내용을 스크롤 할 필요가없는 경우에도 사용자가보기 흉한 grey out 스크롤 바를 볼 수 있다는 것입니다. – David

+0

그래서 ... 네가보기를 원하는 것은 무엇입니까? 그냥 가짜 일 수 있고 항상 스크롤 할 수 있도록 내부 내용을 채 웁니다. – Dancrumb

+0

10 개의 결과 (한 줄 항목 포함)가 있으면 Div에 맞기 때문에 스크롤바가 표시되지 않아야합니다. 10 개가 넘는 결과 또는 각각 1 개 이상의 행인 10 개의 결과는 스크롤 할 수 있어야합니다. Div를 항상 10 개 미만으로 만들 수있어 항상 스크롤 할 수있게 해줍니다. 그러나 IE7에서 버그로 보이는 것을 둘러싼 디자인이 이상하게 보입니다. : – David

0

http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow 나는 비슷한 문제를 가지고 그것을 해결하기 위해 관리를 참조하십시오. 자, 내가 테이블의 너비를 100 %로 설정했다는 것을 이해하십시오. 문제는 doctype과 관련이 있다고 생각합니다. doctype을

<!DOCTYPE html> <!-- HTML5 --> 

으로 설정하려고 시도했지만 여전히 동일한 문제가있었습니다. doctype 선언을 제거한 후에야 IE7 버그가 사라졌습니다 (quirks 모드, 권장하지 않음). 또한 XHTML 1.0/1.1/HTML 4.01 doctype 선언 (Strict, Transitional, Frameset)을 사용하여 테스트했으며 동일한 문제가 발생합니다. doctype 선언을 사용하면 브라우저에 표준 모드를 ​​사용하기 때문에이 문제가 발생합니다. IE7 이하는 표준 모드 브라우징을 잘 처리하지 못합니다.

IE7에서이를 해결하기 위해 너비를 99 %로 설정했습니다. 여기

샘플 코드를 작동 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<style type="text/css"> 
    #Content 
    { 
    overflow-y: auto; 
    overflow-x: hidden; 
    height: 100px; 
    width: 100px; 
    } 
</style> 
</head> 
<body> 
    <div id="Content"> 
    <table width="99%" border="1"> 
     <tbody> 
     <tr><td>1</td></tr> 
     <tr><td>2</td></tr> 
     <tr><td>3</td></tr> 
     <tr><td>4</td></tr> 
     <tr><td>5</td></tr> 
     <tr><td>6</td></tr> 
     <tr><td>7</td></tr> 
     <tr><td>8</td></tr> 
     <tr><td>9</td></tr> 
     </tbody> 
    </table> 
    </div> 
</body> 
</html>