IE7 요소가 하위 요소를 기반으로 확장됩니다.

IE7에서 작동해야하는 목록에서 세로로 정렬 된 항목으로 작업하고 있습니다. 나는 브라우저를 잘 동작하는 것으로 보이는 this 페이지에서 코드를 참조하고 있습니다.IE7 요소가 하위 요소를 기반으로 확장됩니다.

첫 번째 목록 항목이 요소의 너비에 맞게 확장되지 않는 IE7에서 문제가 발생합니다. 아래는 내 코드에 대한 링크입니다. 그것은 각 LI에 특정 폭을 할당 할 정말 가능하지 그래서 목록에

 <ul> 
     <li> 
      <div class="outerContainer"> 
       <div class="innerContainer"> 
        <div class="element"> 
        <a href="#"> 
         To Verify 
        </a> 
        </div> 
       </div> 
      </div> 
      <div class="outerNumber"> 
       <div class="innerNumber"> 
        <div class="element"> 
        <a href="#"> 
         3903 
        </a> 
        </div> 
       </div> 
      </div> 
     </li> 

     <li> 
      <div class="outerContainer"> 
      <div class="innerContainer"> 
      <div class="element"><a href="#">To Authorize</a></div> 
      </div> 
      </div> 
     </li> 

     <li> 
      <div class="outerContainer"> 
      <div class="innerContainer"> 
      <div class="element"><a href="#">View Payments</</a></div> 
      </div> 
      </div> 
     </li> 

     <li> 
      <div class="outerContainer"> 
      <div class="innerContainer"> 
      <div class="element"><a href="#">To Submit/Modify</a></div> 
      </div> 
      </div> 
     </li> 
    </ul>

항목은 동적 될 것입니다.

특정 폭이없는 자식 요소에 맞게 목록 항목을 확장 할 수있는 방법을 알고있는 사람이 있습니까?

출처

2013-06-12 grimmus

왜 두 개의 다른 가 있습니까? – lifetimes

죄송합니다, 지금 수정해야합니다. 사실 JSFiddle은 html 태그를 추가하는 것 같습니다 ... – grimmus

전체 코드를 게시 할 수 있습니까? 직장에서 JSfiddle에 액세스 할 수 없지만 밝은면에서는 여전히 IE7에서 실행됩니다. 그래서 나는 그것을 통해 실행하고 야를 위해 그것을 해결할 것입니다. – ProfileTwist

글쎄, IE7 전용 해킹 스택 (예 : * 해킹)이 있습니다.하지만 솔직히 말해서 일부는 상황을 악화시키는 경향이 있습니다.

IE7에는 CSS 문제가 있으며 때로는 CSS 해킹이 정당화되기도하지만 여기서하고있는 일이 실제로 도움이된다고 생각하지 않습니다.

해킹 된 CSS 코드의 여러 비트를 사용 중지하면 훨씬 간단하게 작업 할 수 있습니다.

예를 들어 .items li .outerContainer .innerContainer .element a은 position:absolute을 지정하지만 IE7 만 지정합니다. 이것은 엘리먼트가 어떻게 배치되는지를 완전히 바꿔 주며 물론 잘못되었습니다.

.items li .outerContainer .innerContainer .element,.items li .outerNumber .innerNumber .element은 top:-50%을 지정합니다. 이것이 대부분의 콘텐츠를 상자 상단에서 밀어 낸다. 사용 중지하면 콘텐츠가 다시 표시됩니다. 적절한 장소에 있지는 않지만 가시적이며 사용 가능합니다.

그래서 내가하는 것이 좋습니다. 모두의 현재 IE7 해킹을 제거하십시오. 그들은 일을 깨뜨리고 더 나아지지 않게합니다.

이러한 해킹을 제거하면 IE7에서 메뉴를 사용할 수 있습니다. 완벽하지는 않지만 사용 가능할 것입니다. 그리고 개인적으로 나는 그것에 맡길 것입니다. 당신은 IE7에서 일할 사이트가 필요하다고 말한다. 그것은 효과가있을 것이다. 다른 브라우저만큼이나 예쁜 것처럼 보이지 않을 수도 있지만 작동 할 것입니다.

정말로이라면 IE7에서 픽셀을 완벽하게 만들어야합니다. 그렇다면 IE7 해킹이 약간 필요할 수 있습니다. 이미 다른 것들을 이미 시도해 봤습니다! 당신은 그들과 조금 더 미묘해야합니다. 어쩌면 padding-top을 .element 또는 이와 비슷한 것으로 조정하여 텍스트를 더 중앙 위치로 이동시킬 수 있습니다.

희망이 있습니다.

[편집] 문제를 해결하는 방법에 대한 또한 생각 ...

당신은 몇 가지 요소는 두 개의 라인을 통해 이동하기 때문에 padding-top이 까다 롭습니다 언급. 이것은 실제로 하나의 스타일을 사용하여 모든 요소를 정확하게 채우는 것을 어렵게 만듭니다. 어떤 것들이 더 오래 될지 미리 아는 경우, 다른 패딩을 다른 패딩에 줄 수는 있지만 문제가 될 수 있습니다.

취할 수있는 또 다른 각도는 Javascript입니다. IE7을 위해이 문제를 해결하기위한 자바 스크립트의 작은 부분은 매우 간단하고 다른 브라우저에는 영향을주지 않아도됩니다.

ie9.js 또는 Selectivizr과 같은 JS 폴리 파일 라이브러리를 사용하여 이전 버전의 IE에서 CSS 문제와 누락 된 기능을 수정하는 방법도 고려해 볼 수 있습니다.

출처

2013-06-12 19:53:30 Spudley

우수한 답변 Spudley에 감사드립니다. 해킹은 크로스 브라우저에서 작동하는 수직 정렬을 시도하기 때문에 적절한 위치에 있습니다. 내 게시물에서 언급 한 링크는이 솔루션을 제공하고 IE7에서 작동하는 가장 강력한 도구입니다. 텍스트가 동적이기 때문에 1 행 또는 2 행 이상의 텍스트에서 작동하는 안쪽 여백 값을 지정하기가 어렵습니다. – grimmus

@grimmus : 문제 없습니다. 희망이 도움이되었다. 내가 단호하게 말할 수있는 한 가지는 이미 해킹 된 것이 작동하지 않는다는 것입니다. 나는 그것을 해결하는 방법에 대한 대답에 몇 가지 더 많은 생각을 게시 할 것입니다. – Spudley

IE7 요소가 하위 요소를 기반으로 확장됩니다.

답변

관련 문제