Internet Explorer 7(인터넷 익스플로러 7)에서 절대 위치 부모의 백분율 너비 하위 요소에서 너비가 축소된 이유는 무엇입니까?

Internet Explorer 7(인터넷 익스플로러 7)에서 절대 위치 부모의 백분율 너비 하위 요소에서 너비가 축소된 이유는 무엇입니까?

나는 절대적인 위치에 있습니다.div여러 명의 어린이를 포함하며, 그 중 하나는 비교적 위치에 있습니다.div사용할 때percentage-based width그 아이에게div으로 붕괴합니다.0 widthFirefox 또는 Safari가 아닌 IE7에서 실행할 수 있습니다.

사용할 경우pixel width,그건 효과가 있다.부모가 상대적으로 위치한 경우 자녀의 백분율 너비가 작동합니다.

1. 제가 놓친 게 있나요?
2. 이것에 대한 쉬운 해결책이 있습니까?pixel-based width아이에게?
3. 이것을 다루는 CSS 사양의 영역이 있습니까?

부모님div정의가 필요합니다.width픽셀 단위 또는 백분율 단위입니다.Internet Explorer 7(인터넷 익스플로러 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단위는 글꼴 크기뿐만 아니라 패딩과 여백에 사용할 수 있기 때문에 액체 레이아웃을 만들 때 더 유용합니다.따라서 텍스트 크기가 조정되면 텍스트 크기에 비례하여 흰색 공간이 커지고 축소됩니다.백분율이 ems보다 더 미세한 제어를 제공한다고 생각하지 않습니다. ems의 100분의 1(0.01em)로 지정하는 것을 막을 수 있는 것은 없으며 브라우저는 적합하다고 판단되는 대로 해석할 것입니다.

이것을 다루는 CSS 사양의 영역이 있습니까?

아니요, 제 기억으로는em%' 1s 및 %'는 CSS 1.0은 기만사록설도용다니습계었하되크꼴글서에▁'▁sizes다니습▁%▁alone▁css▁back▁intended▁at.

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

IE8에서도 작동하는지 확인하기 위해 IE8의 코드를 사용해 보셨습니까?IE8에는 F12디버거()가 있으며 IE7 모드에서도 실행할 수 있습니다.

그div정의된 너비를 가져야 합니다.

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

는 모님입니다.<div>태그에 너비가 지정되지 않았습니다.으로 사용합니다.<div>태그는 백분율 또는 픽셀일 수 있지만, 무엇이든 간에 적절한 위치로 연결되어야 합니다.

<div id="MainDiv" style="width:60%;">
    <div id="Div1">
        ...
    </div>
    <div id="Div2">
        ...
    </div>
    ...
</div>

언급URL : https://stackoverflow.com/questions/6/why-did-the-width-collapse-in-the-percentage-width-child-element-in-an-absolutel