Internet Explorer 7에서 `display: inline-block`이 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

IE7 디스플레이: 인라인 블록 부적합

Internet Explorer 7에서 디스플레이: 인라인 블록 문제가 발생합니까? 당신은 혼자가 아닙니다. 이 속성은 Firefox에서 완벽하게 작동하지만 IE7은 그 존재를 인식하지 못하는 것처럼 보입니다.

문제:

제공된 HTML 및 CSS 사용:

<div class="frame-header">
    <h2>...</h2>
</div>

.frame-header {
    height: 25px;
    display: inline-block;
}

IE7의 "프레임 헤더" 요소는 인라인 블록으로 동작하는 것을 거부하여 원하는 것을 방해합니다. 레이아웃 출력.

해결책:

이 IE7 문제를 해결하려면 다음 디스플레이를 사용하십시오. inline-block hack:

display: inline-block;
*display: inline;
zoom: 1;

설명:

IE7은 다음을 제한적으로 지원합니다. inline-block은 자연스러운 인라인 요소 내에서만 인식합니다. 이 예의 "frame-header"와 같은 이 범주 밖의 요소의 경우

• *display: inline;의 해킹 단계는 특히 IE7 이하에 대해 인라인 동작을 강제합니다.
• zoom: 1;은 인라인 블록의 중요한 속성인 hasLayout을 트리거합니다. 동작.

고려 사항:

이 CSS는 유효성 검사 표준을 충족하지 않으며 잠재적으로 다른 스타일을 방해할 수 있습니다. 따라서 조건부 주석을 통해 구현된 IE7 전용 스타일시트를 사용하는 것이 좋습니다.

<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->

이 대상 스타일시트를 통합하면 전반적인 CSS 무결성을 손상시키지 않고 IE7 디스플레이: 인라인 블록 문제를 해결할 수 있습니다.

위 내용은 Internet Explorer 7에서 `display: inline-block`이 작동하지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!