> 웹 프론트엔드 > CSS 튜토리얼 > IE6 및 IE7에서 `display: inline-block`이 중단되는 이유는 무엇이며 어떻게 해결할 수 있습니까?

IE6 및 IE7에서 `display: inline-block`이 중단되는 이유는 무엇이며 어떻게 해결할 수 있습니까?

Mary-Kate Olsen
풀어 주다: 2024-12-19 09:05:10
원래의
156명이 탐색했습니다.

Why Does `display: inline-block` Break in IE6 and IE7, and How Can I Fix It?

Internet Explorer 6 및 7의 인라인 블록 호환성 문제

광범위한 사용에도 불구하고 CSS 속성 "display: inline-block" 이전 버전의 Internet Explorer에는 알려진 호환성 문제가 있습니다. 특히 IE6 및 IE7에서는 예상대로 작동하지 않습니다.

IE6/IE7 Inline-Block의 단점

IE6 및 IE7에서는 "display: inline-block "는 범위와 같이 자연스럽게 인라인인 요소에서만 제대로 작동합니다. div와 같은 블록 수준 요소에 적용하면 예기치 않은 동작이 발생합니다.

IE6/IE7에 대한 해결 방법

IE6 및 IE7에서 이러한 문제를 해결하기 위한 구체적인 해결 방법은 다음과 같습니다. 필요:

#yourElement {
    display: inline-block;
    *display: inline;
    zoom: 1;
}
로그인 후 복사

"*display: inline" 의사 클래스는 다음을 대상으로 하는 CSS 해킹을 사용합니다. IE7 이하. "zoom: 1" 속성은 IE6 및 IE7이 해당 요소에 "display: inline-block"이 올바르게 작동하는 데 필요한 "레이아웃"이 있는 것으로 인식하도록 합니다.

추가 참고 사항

기술적으로는 가능하지만 공급업체 접두사가 붙은 속성을 사용하면서 이 해결 방법을 유효한 CSS로 유지하는 것은 권장되지 않습니다. "display: inline-block"과 그 호환성 문제에 대한 포괄적인 이해를 위해서는 제공된 답변에 연결된 리소스를 참조하세요.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿