Internet Explorer 6 및 7에서 `display: inline-block`이 올바르게 작동하도록 하려면 어떻게 해야 합니까?

Internet Explorer 6 및 7의 인라인 블록 딜레마

폭넓은 수용에도 불구하고 인라인 블록은 Internet Explorer에서 잘 작동하지 않습니다. 6 및 7. 이 문제는 페이지에 인라인 블록을 효과적으로 사용하려는 노력을 방해할 수 있습니다. 레이아웃.

이 동작의 이유는 IE6/IE7에서 인라인 블록이 스팬과 같은 본질적으로 인라인 요소에서만 올바르게 작동한다는 사실에 있습니다. div와 같은 요소로 범위를 확장하려면 해결 방법이 필요합니다.

과제 극복

div 및 기타 블록 수준 요소를 사용하여 인라인 블록 작업을 수행하려면 IE6/IE7에서는 다음 CSS 스니펫을 사용합니다.

#signup {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

Breaking Down 솔루션

1. display: inline-block: 인라인 블록 동작을 선언합니다.
2. *display: inline: A IE7 이하를 대상으로 인라인을 강제하는 "안전한" CSS 해킹 behavior.
3. zoom: 1: IE6/IE7에서 인라인 블록이 작동하는 데 중요한 블록 수준 요소에 대한 "레이아웃"을 제공합니다.

추가 정보

지원하는 동안 유효한 CSS를 얻을 수 있지만 이 해결 방법은 실용적이지 않습니다. 특히 공급업체 접두사가 붙은 속성이 다른 곳에서 사용되는 경우에는 더욱 그렇습니다.

display: inline-block에 대한 보다 포괄적인 이해를 위해서는 -moz-inline-stack만 제외하고 관련 리소스를 참조하세요. Firefox 2에 적용됩니다.

위 내용은 Internet Explorer 6 및 7에서 `display: inline-block`이 올바르게 작동하도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!