Internet Explorer 7에서 절대 위치 부모의 백분율 너비 자식 요소

나는 div여러 자녀를 포함 하는 절대 위치 를 가지고 있는데 그중 하나는 상대적으로 위치 div합니다. percentage-based widthchild div에서 a 를 사용하면 0 widthIE7에서는 축소 되지만 Firefox 또는 Safari 에서는 축소 되지 않습니다.

내가 사용 pixel width하면 작동합니다. 부모가 상대적으로 배치되면 자식의 백분율 너비가 작동합니다.

1. 내가 여기서 놓친 것이 있습니까?
2. pixel-based width아이 외에 이것에 대한 쉬운 해결책이 있습니까?
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에서 절대 위치 부모의 백분율 너비 자식이 작동하지 않는 이유는 무엇입니까?

Internet Explorer이기 때문에

내가 여기서 놓친 것이 있습니까?

즉, IE가 짜증나게하는 동료 / 고객의 인식을 높이는 것입니다.

자식의 픽셀 기반 너비 외에 쉬운 수정이 있습니까?

em글꼴 크기는 물론 여백 및 여백에 사용할 수 있으므로 액체 레이아웃을 만들 때 더 유용한 단위를 사용하십시오 . 따라서 텍스트의 크기가 조정되면 (실제로 필요한 것) 공백이 늘어나거나 줄어 듭니다. 나는 백분율이 em보다 더 세밀하게 제어한다고 생각하지 않습니다. 100 분의 1 초 (0.01 em)로 지정하는 것을 막을 것은 없으며 브라우저가 적절하다고 해석합니다.

이를 다루는 CSS 사양 영역이 있습니까?

없음, 지금까지 내가 기억하는 emCSS 1.0에서 's와 %의 폰트를 대상으로 한 크기 다시 혼자.

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

IE8에서도 코드가 작동하는지 확인 했습니까? IE8에는 디버거 ( F12)가 있으며 IE7 모드에서도 실행할 수 있습니다.

div필요는 정의 된 폭을 가지고 :

<div id="parent" style="width:230px;">
    <div id="child1"></div>
    <div id="child2"></div>
</div>