기본적으로 폭을 150px로 설정 한 asp.net 페이지에서 dropdownlist 컨트롤을 사용하고 있습니다. mozilla 브라우저에서는 목록 항목이 확장되어 표시되는 반면 IE에서는 목록 항목 텍스트가 목록의 너비를 드롭 다운하도록 제한됩니다. 모질라에서와 마찬가지로 IE에서이 드롭 다운 목록의 동일한 모양을 어떻게 얻을 수 있습니까?CSS를 사용하는 드롭 다운 목록 서식 지정
그냥 목록 항목 컨테이너가 드롭 다운 목록 상자가 아닌 최대 너비로 확장되도록하고 싶습니다.
저는 브라우저에 따라 드롭 다운과 옵션의 폭을 독립적으로 설정할 수 없다고 확신합니다. 유일한 옵션은 자바 스크립트에서 직접 드롭 다운 목록의 동작을 복제하는 것입니다. 기본적으로 드롭 다운 목록 컨트롤처럼 보이는 무언가를 만들고 옵션을 표시하는 절대적으로 위치한 div (또는 ul)를 표시하는 클릭 이벤트 핸들러를 첨부합니다. 그런 다음 옵션을 숨기고 필요한 조치를 취하는 각 옵션에 이벤트 핸들러를 연결합니다. 드롭 다운 컨트롤의 텍스트에 옵션을 표시하고 값을 저장합니다 (숨겨진 양식 필드가 양식 인 경우 숨겨진 양식 필드가 여기에 도움이됩니다). 제출하고 싶습니다). 이것은 약간의 작업이지만 CSS를 신중히 사용하는 한 모든 브라우저에서 동일하게 보일 수 있다는 장점이 있습니다. 여기에 코드를 작성할 시간이 없지만 빠른 수정이 없다는 사실을 인정하면 상당히 간단합니다.
답장을 보내 주셔서 감사합니다.하지만 사용자가 제안한 수정 프로그램은 드롭 다운 목록에 큰 텍스트를 본 후 해결하려고합니다. 이 드롭 다운 목록을 다른 컨트롤과 함께 복제하려고하면 코드에서 많은 변경이 필요할 수 있습니다. 자바 스크립트 또는 CSS를 사용하여이 문제를 해결할 수 있습니까? – ABC
죄송하지만 브라우저에서 원하는 변경을 할 수 있다고 생각하지 않습니다. 이전 컨트롤이있을 때마다 새 컨트롤을 생성하기 위해 javascript를 사용하여이 변경 사항을 캡슐화 할 수 있어야합니다. 옵션을 선택하면 이전 컨트롤을 유지 (숨기기)하고 값을 업데이트 할 수 있습니다. 이 방법은 다른 코드에 영향을주지 않습니다. –
다음 해결책을 찾고 있다고 생각합니다.
https://jsfiddle.net/avernet/2Gn2c/
$("select.ie8-fallback")
.on('mousedown' , 'select', expand)
.on('blur change' , 'select', contract);
내가 유일한 조건 경우 IE가 IE8을 사용하여이 코드를 사용하는 것이 좋습니다 것이지만.
코드를 추가하면 특정 솔루션을 제공했을 것입니다.하지만이 문제를 이해할 수있을 것 같습니다.
나는'width' 대신'max-width'를 설정하는 방향으로 생각할 것입니다? –