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

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

Susan Sarandon
풀어 주다: 2024-11-25 00:15:17
원래의
434명이 탐색했습니다.

Why Do Fixed-Width Select Dropdowns Truncate Content in Internet Explorer, and How Can I Fix It?

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

문제 설명:

언제 고정 너비의 선택 드롭다운을 사용하면 특정 항목에 지정된 너비를 초과하는 텍스트가 있을 수 있습니다. Internet Explorer(IE) 브라우저에서 잘림. IE6 및 IE7에서는 드롭다운 목록이 지정된 너비로 제한되어 긴 항목의 전체 내용을 볼 수 없습니다.

CSS 및 HTML:

제공된 CSS 및 HTML 코드는 문제:

select.center_pull {
    width: 145px;
}
로그인 후 복사
<select>
로그인 후 복사

해결책:

IE 8 이상:

IE 8 이상 , 간단한 CSS 기반 솔루션으로 다음 문제를 해결합니다. 문제:

select:focus {
    width: auto;
    position: relative;
}
로그인 후 복사

이 규칙은 드롭다운에 포커스가 있을 때 가장 긴 항목을 수용하도록 드롭다운 목록의 너비를 조정합니다.

IE 7 이하:

안타깝게도 IE 7 이하에서는 :focus 선택기를 지원하지 않으므로 이를 해결하려면 추가적인 기술이 필요합니다. 잘림:

  • JavaScript: 가장 긴 항목의 너비를 동적으로 계산하고 JavaScript를 사용하여 그에 따라 드롭다운 목록의 너비를 설정합니다.
  • CSS 해킹 : CSS 해킹을 사용하여 IE에 대해 더 넓은 우선순위를 갖는 width: 자동 규칙을 적용하는 등 IE에 대한 더 넓은 드롭다운 목록을 강제합니다. 특히 IE 브라우저.

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

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