IE7이 `inline-block` CSS 속성을 잘못 해석하는 이유는 무엇이며 어떻게 수정할 수 있습니까?

IE7의 inline-block에 대한 잘못된 해석: 문제 해결 가이드

Internet Explorer 7(IE7)은 CSS 표시와 관련하여 독특한 과제를 제시합니다. 속성. 그러한 사례 중 하나는 inline-block 속성을 올바르게 해석할 수 없다는 것입니다.

문제의 코드

다음 HTML 및 CSS 코드를 고려하세요.

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

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

IE7 잘못된 동작

어떤 이유로 IE7이 인라인 블록 스타일을 적용하지 못하여 원하는 레이아웃이 손상되었습니다.

IE7 해킹

이 문제를 극복하려면 맞춤 CSS 해킹이 필요합니다. IE7:

.frame-header {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

기본적으로 IE7은 기본적으로 인라인 요소에 대해서만 인라인 블록을 인식합니다. 이 핵은 이러한 제한을 우회합니다.

• display: inline: display: inline-block을 덮어써 IE7과의 호환성을 보장합니다.
• zoom: 1: 인라인 블록을 달성하는 데 필수적인 hasLayout 동작을 트리거합니다. 기능.
• 스타 속성 해킹: 디스플레이 적용을 제한합니다: IE7 및 이전 브라우저에 대한 인라인.

조건부 스타일시트

최적의 성능과 유효성 검사를 보장하려면 IE7을 대상으로 하는 조건부 스타일시트를 사용하는 것이 좋습니다. 특히:

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

"ie7.css" 파일에 IE7 렌더링 문제를 해결하기 위한 사용자 정의 CSS 해킹을 포함할 수 있습니다. 이 접근 방식은 코드 복잡성을 최소화하고 더 높은 수준의 유효성 검사를 유지합니다.

위 내용은 IE7이 `inline-block` CSS 속성을 잘못 해석하는 이유는 무엇이며 어떻게 수정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!