2009-06-09 2 views
1

다음 CSS 코드를 가지고 Firefox, Chrome에서 잘 작동하지만 IE7에서 실행하면 지옥처럼 깨지기 쉽습니다!스크롤 막대를 표시하는 IE에서 작동하도록 CSS 코드를 수정하려면 어떻게해야합니까?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd"> 

<html lang="en"> 

    <head> 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

    <title>Box Test</title> 

    <style type="text/css"> 

     .mybox { float:left; overflow:auto; visibility:visible; 
      width:220px; height:100px; 
      margin:3px; padding:10px; 

      border-left:1px solid gray; border-right:1px solid black; 
      border-top:1px solid gray; border-bottom:1px solid black; 
      background-color:gold; } 

    .small { width:45px; height:auto; font-weight:bold;} 

    .boxfont{font-weight:bold; font-size:16px; margin-left:15px;} 

    </style> 

    </head> 

    <body> 

    <div class="mybox small"> 
    box 1 
     <div class="boxfont">box1 label</div> 
     </div> 

    <div class="mybox small">box 2</div> 

    <div class="mybox small">box 3</div> 


    </body> 

</html> 

왜 IE7의 첫 번째 상자에는 스크롤 막대가 표시되고 다른 브라우저에는 스크롤 막대가 표시되지 않습니까?

+0

이 질문/답변보기 : http://stackoverflow.com/questions/927626/how-do-you-deal-with-internet-explorer – JoshFinnie

답변

1

overflow:auto.mybox 인 것으로 의심되지만 현재 IE7에 대한 액세스 권한이 없기 때문에 테스트 할 수 없습니다.

1

.mybox60px으로 늘리거나 overflow:hidden으로 설정하십시오. 이것은 IE7이 다른 폭의 계산으로 스크롤 막대를 보여주기 때문에 매우 귀찮습니다. ...

1

. 작은 폭은 10px의 왼쪽 및 오른쪽 패딩을 갖습니다. .boxfont의 왼쪽 여백은 15 픽셀입니다.

45px-10px-10px-15px는 10px의 공백으로 남겨 둡니다. 다른 브라우저는 텍스트를 표시하고 IE는 스크롤 막대를 넣습니다.

.boxfont에 overflow:hidden을 넣어 Firefox에서 잘린 부분을 확인하십시오.

이 문제를 해결하려면 .small에 overflow:visible을 넣으면 IE에 텍스트가 표시되지만 상자가 조금 커집니다. 또는 상자의 너비를 약간 늘릴 수 있습니다.

1

당신이 경험하고있는 문제는 IE Box Model 문제 때문입니다. 아래와 같이 .boxfont 정의를 바꾸면 코드에서 디스플레이 문제를 해결할 수 있습니다.

.boxfont{font-weight:bold; font-size:16px; margin-left:10px;} 
1

overflow:auto 속성을 제거 할 수 있으면 작동 할 수 있습니다. 스크롤 바 문제를 수정하는 것이 더 낫습니다. setup IE7 cross css style.

관련 문제