IE에서 드롭 다운 목록은 드롭 박스와 같은 너비를 사용하지만 (이치에 맞기를 바랍니다) Firefox에서는 드롭 다운 목록의 너비가 콘텐츠에 따라 다릅니다.
이것은 기본적으로 보관 용 계정이 가능한 한 가장 긴 선택 항목을 표시 할 수있을만큼 충분히 넓어야 함을 의미합니다. 이로 인해 내 페이지가 매우 추하게 보입니다.
이 문제에 대한 해결 방법이 있습니까? CSS를 사용하여 드롭 박스와 드롭 다운 목록의 너비를 다르게 설정하려면 어떻게해야하나요?
답변
여기에 또 다른 jQuery 기반 예제가 있습니다. 여기에 게시 된 다른 모든 답변과는 달리 모든 키보드 및 마우스 이벤트, 특히 클릭을 고려합니다.
if (!$.support.leadingWhitespace) { // if IE6/7/8
$('select.wide')
.bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
.bind('click', function() { $(this).toggleClass('clicked'); })
.bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
.bind('blur', function() { $(this).removeClass('expand clicked'); });
}다음 CSS와 함께 사용하십시오.
select {
width: 150px; /* Or whatever width you want. */
}
select.expand {
width: auto;
}wide해당하는 드롭 다운 요소에 클래스 를 추가하기 만하면 됩니다.
<select class="wide">
...
</select>다음은 jsfiddle 예제 입니다. 도움이 되었기를 바랍니다.
답변
자신 만의 드롭 다운 목록을 만드는 것은 그만한 가치가있는 것보다 더 고통 스럽습니다. 일부 JavaScript를 사용하여 IE 드롭 다운이 작동하도록 할 수 있습니다.
그것은 약간의 YUI 라이브러리와 IE 선택 상자를 수정하기위한 특별한 확장을 사용합니다.
다음을 포함하고 <select>요소를<span class="select-box">
페이지의 본문 태그 앞에 다음을 넣으십시오.
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
</script>
<script src="ie-select-width-fix.js" type="text/javascript">
</script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
</script>수락 후 편집 :
YUI 라이브러리 및 Hack 컨트롤 없이도이 작업을 수행 할 수 있습니다. 정말 필요한 것은 select 요소에 onmouseover = “this.style.width = ‘auto'”onmouseout = “this.style.width = ‘100px'”(또는 원하는대로)를 입력하는 것입니다. YUI 컨트롤은 멋진 애니메이션을 제공하지만 반드시 필요한 것은 아닙니다. 이 작업은 jquery 및 기타 라이브러리로도 수행 할 수 있습니다 (이에 대한 명시적인 문서를 찾지 못했지만).
-편집 수정 :
IE는 선택 컨트롤에 대한 onmouseout에 문제가 있습니다 (옵션에 대한 마우스 오버를 선택에 대한 마우스 오버로 간주하지 않음). 이로 인해 마우스 아웃 사용이 매우 까다로워집니다. 첫 번째 해결책은 지금까지 찾은 것 중 최고입니다.
답변
다음을 시도해 볼 수 있습니다 …
styleClass="someStyleWidth"
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}"
onblur="this.style.position='';this.style.width=''"나는 시도했고 그것은 나를 위해 작동합니다. 다른 것은 필요하지 않습니다.
답변
다음 솔루션을 사용했으며 대부분의 상황에서 잘 작동하는 것 같습니다.
<style>
select{width:100px}
</style>
<html>
<select onmousedown="if($.browser.msie){this.style.position='absolute';this.style.width='auto'}" onblur="this.style.position='';this.style.width=''">
<option>One</option>
<option>Two - A long option that gets cut off in IE</option>
</select>
</html>참고 : $ .browser.msie 에는 jquery가 필요합니다.
답변
@Thad 당신은 또한 흐림 이벤트 핸들러를 추가해야합니다
$(document).ready(function(){
$("#dropdown").mousedown(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
$("#dropdown").blur(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
});그러나 이렇게하면 요소가 아닌 클릭시 선택 상자가 계속 확장됩니다. (IE6에서는 실패한 것처럼 보이지만 Chrome 및 IE7에서는 완벽하게 작동합니다)
답변
IE6 / IE7 / IE8에서는 할 수있는 방법이 없습니다. 컨트롤은 앱에 의해 그려지고 IE는 단순히 그 방식으로 그려지지 않습니다. 가장 좋은 방법은 드롭 다운이 한 너비이고 목록이 다른 너비를 갖는 것이 중요한 경우 간단한 HTML / CSS / JavaScript를 통해 고유 한 드롭 다운을 구현하는 것입니다.
답변
jQuery를 사용하는 경우 다음 IE 선택 너비 플러그인을 사용해보십시오.
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
이 플러그인을 적용하면 Internet Explorer의 선택 상자가 Firefox, Opera 등에서 작동하는 것처럼 작동하는 것처럼 보입니다. 옵션 요소를 고정 너비의 모양과 스타일을 잃지 않고 전체 너비로 열 수 있습니다. 또한 Internet Explorer 6 및 7의 선택 상자에 패딩 및 테두리에 대한 지원을 추가합니다.
