IE6에서 선택 중복 버그를 해결하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/7937

문제

IE를 사용하는 경우 선택 입력 요소 위에 절대 위치의 div를 배치할 수 없습니다.이는 select 요소가 ActiveX 개체로 간주되고 페이지의 모든 HTML 요소 위에 있기 때문입니다.

나는 이미 팝업 div를 열 때 선택 항목을 숨기는 사람들을 보았습니다. 이로 인해 컨트롤이 사라지는 사용자 경험이 상당히 나빠졌습니다.

FogBugz는 실제로 팝업이 표시될 때 모든 선택 항목을 텍스트 상자로 바꾸는 매우 똑똑한 솔루션(v6 이전)을 가지고 있었습니다.이는 버그를 해결하고 사용자의 눈을 속였으나 동작이 완벽하지는 않았습니다.

또 다른 해결책은 더 이상 선택 요소를 사용하지 않고 모든 곳에 기록하는 FogBugz 6입니다.

현재 내가 사용하는 마지막 해결책은 IE 렌더링 엔진을 망쳐놓고 강제로 절대 위치를 렌더링하도록 하는 것입니다. <div> ActiveX 요소로도 사용되어 선택 요소 위에 존재할 수 있습니다.이는 보이지 않는 위치를 배치함으로써 달성됩니다. <iframe> 안에 <div> 다음을 사용하여 스타일링합니다.

#MyDiv iframe
{
    position: absolute;
    z-index: -1;
    filter: mask();
    border: 0;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 9999px;
    height: 9999px;
    overflow: hidden;
}

이보다 더 나은 솔루션을 갖고 있는 사람이 있나요?

편집하다:이 질문의 목적은 실제 질문만큼이나 많은 정보를 제공합니다.나는 <iframe> 좋은 해결책이 되려고 노력하고 있지만 여전히 이것을 제거하는 등의 개선점을 찾고 있습니다. 못생기고 쓸모없는 태그 접근성을 떨어뜨리는 거죠.

도움이 되었습니까?

해결책

Iframe보다 더 좋은 것은 없습니다.

하지만 JS에서 몇 가지 변수를 찾아 추가할 수 있다는 생각이 들었습니다.

  1. IE 6
  2. 높은 Z-색인(div를 플로팅하는 경우 Z-색인을 설정해야 하는 경향이 있음)
  3. 상자 요소

그런 다음 이러한 항목을 찾고 iframe 레이어만 추가하는 스크립트가 깔끔한 솔루션이 될 것입니다.

폴

다른 팁

iframe 해킹 솔루션에 감사드립니다.추악하면서도 여전히 우아합니다.:)

그냥 코멘트입니다.SSL을 통해 사이트를 실행하는 경우 더미 iframe 태그에 src가 지정되어 있어야 합니다. 그렇지 않으면 IE6에서 보안 경고가 표시됩니다.

예:

    <iframe src="javascript:false;"></iframe>

어떤 사람들은 src를 공백.html로 설정하는 것을 권장하는 것을 보았습니다...하지만 저는 자바스크립트 방식을 더 좋아합니다.그림을 이동.

내가 아는 한 두 가지 옵션만 있는데, 그 중 더 좋은 것은 언급된 iframe 사용법입니다.다른 하나는 오버레이가 표시될 때 모든 선택 항목을 숨겨 더욱 이상한 사용자 경험을 제공합니다.

이 플러그인을 사용해 보세요 http://docs.jquery.com/Plugins/bgiframe , 제대로 작동할 거예요!

용법: $('.your-dropdown-menu').bgiframe();

내 생각에는 없는 것 같다.저는 직장에서 이 문제를 해결하려고 노력했습니다.선택 컨트롤을 숨기는 것이 우리가 생각해 낼 수 있는 최선이었습니다(포로 청중이 있는 기업 상점이기 때문에 사용자 경험은 일반적으로 PM의 결정에 영향을 미치지 않습니다).

해결책을 찾을 때 온라인에서 수집한 정보로는 이에 대한 좋은 해결책이 없습니다.나는 FogBugz 솔루션(Facebook과 같은 많은 유명 사이트에서 수행하는 것과 동일한 솔루션)을 좋아하며 이것이 실제로 내 프로젝트에서 사용하는 것입니다.

선택 상자와 Flash에서도 동일한 작업을 수행합니다.

오버레이를 사용할 때 통과하는 기본 개체를 숨깁니다.좋지는 않지만 작동합니다.JavaScript를 사용하여 오버레이를 표시하기 직전에 요소를 숨겼다가 완료되면 다시 표시할 수 있습니다.

나는 꼭 필요한 경우가 아니면 iframe을 사용하지 않으려고 노력합니다.

오버레이 중에 선택 상자 대신 레이블이나 텍스트 상자를 사용하는 방법은 깔끔합니다.나는 그것을 미래에 사용할 수 있습니다.

Mootools는 iframeshim이라는 iframe을 사용하여 꽤 잘 정리된 솔루션을 제공합니다.

단지 이를 위해 lib를 포함할 가치는 없지만 프로젝트에 lib가 있다면 'iframeshim' 플러그인이 존재한다는 점을 알아야 합니다.

bgiframe이라는 간단하고 간단한 jquery 플러그인이 있습니다.개발자는 ie6에서 이 문제를 해결하기 위한 목적으로만 이를 만들었습니다.

나는 최근에 사용했고 그것은 매력처럼 작동합니다.

선택 요소를 숨길 때 "가시성:표시 대신 숨김:그렇지 않으면 브라우저가 문서를 다시 흐르게 합니다.

대화 상자나 오버레이가 표시될 때 CSS를 사용하여 선택 구성 요소를 숨겨 이 문제를 해결했습니다.

selects[i].style.visibility = "숨김";

function showOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "visible";
    selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "hidden";
    }
}

function hideOverlay() {
    el = document.getElementById("overlay");
    el.style.visibility = "hidden";
    var selects = document.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++) {
        selects[i].style.visibility = "visible";
    }
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top