>웹 프론트엔드 >CSS 튜토리얼 >고정 너비 드롭다운이 IE에서 콘텐츠를 자르는 이유는 무엇이며 어떻게 해결할 수 있습니까?

고정 너비 드롭다운이 IE에서 콘텐츠를 자르는 이유는 무엇이며 어떻게 해결할 수 있습니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-12-01 17:42:11425검색

Why Do Fixed-Width Dropdowns Cut Off Content in IE, and How Can I Fix It?

IE에서 콘텐츠를 자르는 고정 너비의 드롭다운

IE에서 고정 너비의 드롭다운을 선택하면 항목의 콘텐츠가 잘릴 수 있습니다. 목록이 확장됩니다. 이 문제는 드롭다운의 너비가 제한되어 더 넓은 요소가 완전히 표시되지 않기 때문에 발생합니다.

드롭다운의 CSS:

select.center_pull {
    width: 145px;
    /* Other CSS properties... */
}

문제 배경:

IE6 및 IE7에서는 이러한 동작이 나타나는 반면 Firefox는 가장 긴 항목을 수용할 수 있는 드롭다운 너비입니다. 그러나 요구 사항은 더 긴 항목이 표시되도록 허용하면서 드롭다운의 고정 너비를 유지하는 것입니다.

IE 8 이상에 대한 해결 방법:

IE 8 이상의 경우, 문제는 CSS를 사용하여 해결할 수 있습니다.

select:focus {
    width: auto;
    position: relative;
}

이 CSS를 적용하면 드롭다운 너비가 동적으로 변합니다. 초점이 잡힐 때. 이렇게 하면 목록 항목이 고정 너비 이상으로 확장되어 완전한 가시성이 보장됩니다.

이전 IE 버전과의 호환성:

안타깝게도 이 솔루션은 IE 7에 적용되지 않습니다. 및 이전 버전은 ":focus" 선택기를 지원하지 않기 때문입니다.

위 내용은 고정 너비 드롭다운이 IE에서 콘텐츠를 자르는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.