Internet Explorer 7에서 절대 위치에 있는 상위 요소의 백분율 너비 하위 요소

StackOverflow https://stackoverflow.com/questions/6

문제

나는 절대적인 위치에 있다 div 여러 명의 자식이 포함되어 있으며 그 중 하나는 상대적으로 위치가 높습니다. div.내가 사용할 때 백분율 기반 너비 아이에 div, 너비가 '0'으로 축소됩니다. 인터넷 익스플로러 7, 하지만 Firefox나 Safari에서는 그렇지 않습니다.

내가 사용한다면 픽셀 너비, 효과가있다.부모가 상대적으로 배치된 경우 자식의 너비 백분율이 작동합니다.

  1. 여기에 제가 놓친 것이 있나요?
  2. 이 문제 외에 쉽게 해결할 수 있는 방법이 있나요? 픽셀 기반 너비 아이에게?
  3. 이를 다루는 CSS 사양 영역이 있나요?
도움이 되었습니까?

해결책

부모 div 정의되어 있어야 합니다. width, 픽셀 또는 백분율로 표시됩니다.Internet Explorer 7에서는 상위 항목 div 정의된 것이 필요합니다 width 어린이 비율 div올바르게 작동하는 것입니다.

다른 팁

다음은 몇 가지 샘플 코드입니다.나는 이것이 당신이 찾고 있는 것이라고 생각합니다.다음은 Firefox 3(mac) 및 IE7에서 정확히 동일하게 표시됩니다.

#absdiv {
  position: absolute; 
  left: 100px; 
  top: 100px; 
  width: 80%; 
  height: 60%; 
  background: #999;
}

#pctchild {
  width: 60%; 
  height: 40%; 
  background: #CCC;
}

#reldiv {
  position: relative;
  left: 20px;
  top: 20px;
  height: 25px;
  width: 40%;
  background: red;
}
<div id="absdiv">
    <div id="reldiv"></div>
    <div id="pctchild"></div>
</div>

8 이전의 IE는 박스 모델에 시간적 측면을 갖고 있어 가장 두드러지게 백분율 기반 너비 문제를 생성합니다.귀하의 경우에는 절대적으로 위치합니다. div 기본적으로 너비가 없습니다.너비는 콘텐츠의 픽셀 너비를 기준으로 계산되며 콘텐츠가 렌더링된 후에 계산됩니다.따라서 IE가 당신의 상대적인 위치를 발견하고 렌더링하는 시점에서 div 부모의 너비는 0이므로 그 자체가 0으로 축소됩니다.

많은 실제 예제와 함께 이에 대해 더 깊이 논의하고 싶다면 한 번 살펴보세요. 여기.

절대적으로 위치한 부모의 비율이 IE7에서 일하지 않는 이유는 무엇입니까?

인터넷 익스플로더이기 때문에

여기에 제가 놓친 것이 있나요?

즉, IE가 형편없다는 동료/클라이언트의 인식을 높이는 것입니다.

자식의 픽셀 기반 너비 외에 쉽게 수정할 수 있는 방법이 있나요?

사용 em 단위는 패딩과 여백, 글꼴 크기에 사용할 수 있으므로 유동적 레이아웃을 만들 때 더 유용합니다.따라서 공백은 크기가 조정되면 텍스트에 비례하여 늘어나고 줄어듭니다(실제로 필요한 것입니다).나는 백분율이 em보다 더 세밀한 제어를 제공한다고 생각하지 않습니다.100분의 1em(0.01em) 단위로 지정하는 것을 막을 수 있는 것은 없으며 브라우저는 적합하다고 판단되는 대로 해석합니다.

이를 다루는 CSS 사양 영역이 있나요?

없음, 내가 기억하는 한 em's와 %'s는 CSS 1.0에서 글꼴 크기만을 위한 것이었습니다.

나는 이것이 방식과 관련이 있다고 생각합니다. hasLayout 속성은 이전 브라우저에서 구현됩니다.

IE8에서도 코드가 작동하는지 확인하기 위해 코드를 시험해 보셨나요?IE8에는 디버거(F12) IE7 모드에서도 실행할 수 있습니다.

그만큼 div 너비가 정의되어 있어야 합니다.

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top