IE7의 인라인 블록 컨테이너 안에 100 % 너비 블록

Question

IE7에 문제가 있습니다. 인라인 블록 컨테이너 안의 블록 요소가 연속 폭에 맞게 늘어나지 않습니다.

코드 :

여기

<div class="a"> 
    <div class="b"></div> 
    <div class="c"></div> 
</div> 

.a { 
    border: 5px solid blue; 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
} 
.b { 
    width: 500px; 
    height: 10px; 
    background: green; 
} 
.c { 
    height: 10px; 
    background: red; 
} 

가 원하는 동작이 다른 브라우저에서 볼 수있다 : 여기

내가 IE7에있어 무엇 :

예 : http://jsfiddle.net/Lnfwezm4/5/

직접 링크 : http://fiddle.jshell.net/Lnfwezm4/5/show/

어떻게하면 IE7에서 부모 너비에 맞게 빨간색 블록을 만들 수 있습니까 (IE6도 훌륭합니다)? 그 해결됩니다 .A 어떤 폭을 추가

Answer 1

:

.a { 
    border: 5px solid blue; 
    display: inline-block; *display: inline; zoom: 1; 
    width: 500px; 
} 

는의 후드 아래에 무슨 일이 일어나고 있는지 보자. 부모 요소의 폭의 기본 너비가 100 % 인 블록 요소가 있습니다. .c의 부모 요소는 폭이 없으며 (암시 적으로 100 % 또는 다른 값을 설정하는) 폭이없는 .a입니다. 폭은 하위에 따라 다르지만 ... 정의되지 않은 값의 100 %는 정의되지 않습니다.이 경우 , 0px; (의도적으로 조금 단순화했습니다)

내 생각에 IE7이 .c의 너비를 계산하는 방법을 알 수있는 유일한 방법은 .a에 약간의 너비를주는 것입니다 (반드시 고정되어 있지 않아도되고 % 또는 다른 단위).

어떤 이유로 든 .a에 너비를 줄 수없는 경우 왜, 무엇을하려고하는지 알려주세요. 약간 다른 마크 업으로 달성 할 수있는 좋은 기회가 있습니다.