2011-08-19 5 views
1

그림이 포함 된 책의 텍스트를 표시하는 페이지가 있습니다. 특정 상황에서 가로 스크롤 막대가 표시되는 문제가 있습니다. CSS는 다음과 같습니다..NET MVC 3 - 원하지 않는 가로 스크롤 막대

#textDisplay 
{ 
    width: 704px; 
    height: 750px; 
    margin: 0 0 20px 20px; 
    overflow-y: auto; 
    overflow-x; auto; 
} 

.picture 
{ 
    font: 13px Arial, sans-serif; 
    font-style: italic; 
    text-align: center; 
    border: 0; 
} 

.picture img 
{ 
    border: 1px solid #CCCCCC; 
    vertical-align: middle; 
    margin-bottom: 5px; 
} 

.left 
{ 
    margin: 0 20px 10px 20px; 
    float: left; 
} 

#textDisplay는 전체 텍스트를 둘러싼 div에서 사용됩니다. 그림의 정의는 다음과 같습니다.

<div class="picture left"> 
    <img src="../../../../Content/Images/BookPhotos/Men Bowlers 1953.jpg" alt="Men Bowlers 1953 - drawings by Cyril Thompson" /> 
    <br />Men Bowlers 1953 – drawings by Cyril Thompson 
</div> 

단락 태그 p를 사용하면 가로 스크롤 막대가 표시됩니다. 그러나 내가 h4 태그를 선행하거나 따르는 경우에는 스크롤바가 표시되지 않습니다. 이 그렇게되어야하는 이유

p 
{ 
    font-size: 10pt; 
    font-family: Verdana; 
    margin: 15pt 20px 15pt 20px; 
} 

h4 
{ 
    text-align: left; 
    font-size: 10pt; 
    font-weight: bold; 
    font-family: Arial, Verdana, Sans-Serif; 
} 

누구나 어떤 아이디어와 나는 그것을 고칠 수있는 방법 :

그들의 정의는?

Firefox 나 Chrome에서는 발생하지 않습니다!

답변

2

사용이 :

overflow-y: auto; 
overflow-x: hidden; 

가에서보세요 :

+0

세로 스크롤 막대가 필요합니다. overflow-x 시도했습니다 : 없음; overflow-x : 숨김; 그러나 나는 여전히 수평 스크롤 바를 얻는다. – xiecs

+0

내가 볼 수있는 라이브 사이트가 있습니까? – thirtydot

+0

http://testdir1.royalleamingtonspabc.org.uk - 100 년 동안 History Quarter/Bowling으로 이동하여 Chapter 6을 선택하십시오. 두 번째 및 다섯 번째 사진이 문제의 원인입니다. – xiecs

0

예, thirtydot도 나를 위해 일한 것을.

필자는 body 태그 아래에 래퍼 div가 있었으며 원하지 않는 스크롤 막대를 만든 가로 오버플로가있었습니다.

overflow-y: auto; 
overflow-x: hidden; 

이것은 트릭을 수행했습니다. 게시 해 주셔서 감사합니다.