IE에서 블록 요소 강제 적용 안 함 (고정 너비 부모 없음)

이것은 웹에서 상당히 논의 된 문제이지만 연구 및 시행 착오를 거친 후 여전히 아래 HTML이 다음과 같이 작동하지 않습니다. IE 7, 8 또는 9에 원하는 다음과 같이IE에서 블록 요소 강제 적용 안 함 (고정 너비 부모 없음)

<html> 
    <head> 
     <title>Untitled Page</title> 
     <style> 
      .container { 
       white-space: nowrap; 
       overflow: auto; 
       position: absolute; 
      } 
      .childContainer { 
       float: left; 
      } 
      .box { 
       float: left; 
       border: 1px solid black; 
       width: 20px; 
       height: 20px; 

      } 
     </style> 
    </head> 

    <body> 
     <div class="container"> 
      <div class="childContainer"> 
       <div class="box"></div><div class="box"></div><div class="box"></div> 
       <!-- repeat until off screen --> 
       <div class="box"></div><div class="box"></div><div class="box"></div> 
      </div> 
      <div class="childContainer"> 
       <span>This should not wrap!</span> 
      </div> 

     </div> 
    </body> 
</html>

원하는 동작은 다음

.box 요소 감싸 안 - 스크롤바 그것을 창 아래쪽 나타나야
.box 요소의 너비와 높이가 고정되어 있어야합니다.
. 컨테이너 및 .childContainer는 고정 폭을 가질 수 없습니다. 파라미터 nowrap도 블록 : .box 요소의 수는
는 IE7 +와 크롬의 최신 버전과 파이어 폭스

에서 합리적으로 일관되게 행동해야한다 임의, 나는 그것이 공백을 수여 생각 집단. SPAN 요소를 사용하여 시도했지만 float : left 또는 width 특성을 가진 블록 요소가되도록 강제해야합니다. 그런 다음 DIV 요소와 동일한 문제가 있습니다.

JavaScript를 사용하지 않으면이 문제에 대한 해결책이 반드시 있어야하지만, 그 밖의 모든 것이 실패하면 옵션이 될 것입니다.

출처

2012-02-03 Dale Anderson

'.box { 국경 : 1 픽셀의 검은 고체; 너비 : 20px; 신장 : 20px; '플로트를 제거 할 수 있습니까? 왼쪽 .box 클래스에 – Murtaza

http://jsfiddle.net/hjCWN/

내가 IE에서 그것을 시도하지 않은,하지만 당신은 테이블에 상자를 넣어 white-space: nowrap;을 제거하려고 margin-right: -99999px;

출처

2012-02-03 07:41:48 biziclop

와우, 무슨 해킹! 훨씬 더 복잡한 실제 페이지 레이아웃을 해킹하기 위해 완벽하게 작동합니다. 대단히 감사합니다! –

원래 절대/nowrap/float 트릭을 이해하고 싶습니다. http://jsfiddle.net/hjCWN/3/ – biziclop

로 대체 할 수있다. 그것은 유일한 실용적인 접근 방법 인 것 같습니다. 당신이 .box 요소가 행에 표시되도록하려고하면

는 float: left의 사용은 다른 수준에서 작동 정도로 말, white-space를 설정하여 방지 할 수없는 자신의 효과를 가지고있다. 그러나 그것들을 테이블 행에 넣음으로써, 당신은 그것들을 연속적으로 강제합니다.

당신은 심지어 테이블의 해당 요소와 단지 스타일의 세포로 분배 할 수 있습니다

<style> 
table.boxes td { 
    border: 1px solid black; 
    width: 20px; 
    height: 20px; 
    padding: 0; 
} 
</style> 
... 
<table class=boxes cellspacing=0><tr><td>...</td><td>...</td>...<td>...</td></tr></table>

출처

2012-02-03 07:44:34

IE에서 블록 요소 강제 적용 안 함 (고정 너비 부모 없음)

답변

관련 문제