CSS 문제 - 수평 스크롤 콘텐츠를 숨 깁니다

이 나에게 스크롤을 제공하지만 높이가 동일하게 유지하므로 텍스트가 스크롤 막대에 포함되어 있기 때문에 나는 ... ...이 하나에 문제가있을CSS 문제 - 수평 스크롤 콘텐츠를 숨 깁니다

<td class='messages'><div style='border:0px;padding:0px;width:100%;overflow-x:auto;background-color:#66C2FF;height:' class='messages'> 
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
</div> 
</td>

미리 감사드립니다.

출처

2011-09-03 GuyFromOverThere

파이어 폭스 6, 크롬 13, 사파리 5.1, 오페라 11.5 및 IE9에서는 괜찮아 보입니다. 테스트 할 버전은 무엇입니까? 나에게 IE7 문제처럼 들린다. – tw16

그것은 IE8에서 나를 위해 체포되었습니다.) (나는 알고 있습니다 ... 왜 IE 8을 가지고 있습니까?). 문제는 '높이'값이 없다는 것입니다 (@andreas가 대답에 언급했듯이). 그는 '높이 : 50px'또는 뭔가 (스크롤 막대를 사용하여 텍스트를 표시 할만큼 충분히)가 필요합니다. – jadarnel27

왜 높이를 지정해야합니까? – melhosseiny

CSS를 외부 스타일 시트로 옮기고 조건부 주석을 사용하면 문제가있는 브라우저 만 대상으로 할 수 있습니다 (IE8 이하에서는 IE8에서 복제 할 수 없기 때문에 사용했습니다). 바닥에 패딩을 추가했습니다.

라이브 예 : http://jsfiddle.net/tw16/Vx9HZ/

이 같은 <head>에 조건부 코멘트를 넣어 :

<head> 
    <!--[if lte IE 7]> 
     <style>div.messages {padding:0 0 22px;}</style> 
    <![endif]--> 
</head>

는 CSS :은 외부 스타일 시트로 이동.

div.messages { 
    border:0px; 
    padding:0 0 0; 
    width:100%; 
    overflow-x:auto; 
    background-color:#66C2FF; 
}

HTML : 밖으로 박탈 스타일.

<td class='messages'> 
    <div class='messages'>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
    </div> 
</td>

출처

2011-09-03 19:03:53 tw16

작동하지만 td가 테이블에 있으므로 다른 모양이됩니다 – GuyFromOverThere

@ user924770 : 더 많은 코드를 게시 할 수있어서 당신이 말하는 영향을 볼 수 있습니다. 또한 스크롤바 * 표시 * 의미가 나타 납니까 또는 당신은'div' 콘텐츠를 맞게 확장하려고? – tw16

<표 스타일 = '폭 : 80 % "> <표 스타일 ='폭 : 100 %">

– GuyFromOverThere

정확하게 이해하면 다음과 같이 문제를 해결해야하며 지정된 경우 너비에 맞게 줄을 끊어야합니다. 이것을 당신의 스타일 = ""에 넣으십시오.

word-wrap: break-word

추신. 또한 높이가 지정되지 않은 "높이 :"가 있습니다.

출처

2011-09-03 18:19:08 Andreas

예 srry 나는 이미 그것을 고쳤습니다. 그러나 여전히 작동하지 않을 것이고 단어 감싸기는 모든 크로스 브라우저가 아닙니다 .... – GuyFromOverThere

나는 몇몇 브라우저가 단순히 "긴 단어"를 깨뜨리지 않는다고 확신합니다. 그 주위에 절대 없습니다. 그러나 이것이 바로 워드 랩 (word-wrap)이 아니라 대부분의 브라우저가 실제로 그것을 지원하는 것입니다. 그렇지 않으면, TD에서 nowrap = "nowrap"을 시도하면 레거시 브라우저에 강제로 적용될 수 있습니다. – Andreas

이렇게해도 문제가 해결되지는 않습니다. 단어가 줄 바꿈 한 경우에도 스크롤바는 텍스트의 맨 아래를 계속 덮습니다. – tw16

이 나를 위해 작동합니다

<html> 
    <body> 
    <td class='messages'> 
     <div style='border:0px;padding:0px;width:100%;overflow-x:auto;background-color:#66C2FF; height= 50PX; class=messages;'> 
     AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
     </div> 
    </td> 
    </body> 
</html>

내가 텍스트와 스크롤 막대를 표시 할만큼 큰했다 div에 대한 height를 지정했습니다. =) 희망이 도움이됩니다.

출처

2011-09-03 18:25:08 jadarnel27

텍스트와 내용의 길이가 내 페이지에 따라 다를 수 있다는 점을 제외하고는 좋은 해결책입니다. 따라서 50 픽셀은 항상 작동하지 않습니다 – GuyFromOverThere

CSS 문제 - 수평 스크롤 콘텐츠를 숨 깁니다

답변

관련 문제