iframe Shimming 또는 IE6 (및 아래) Z-INDEX 버그 선택

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

문제

음 이이 문제를 겪었는지 잘 모르겠습니다.
간단한 설명은 IE6에 있습니다 <select> 객체는 다른 항목에 대해 표시됩니다. DIV의 경우 심지어 ... 즉, 특정 요소를 클릭하는 모든 것 (예 : Lightbox, Multibox 등) 위에있는 DIV를 표시하는 멋진 JavaScript 효과가있는 경우. div 겹침 a <select> 당신의 div get은 마치 아래에있는 것처럼 표시됩니다. <select> 이 경우 최대 및 최소 z-index가 작동하지 않습니다

인터넷 검색을 시도하고 iframe shim 솔루션을 찾았습니다
그러나 나는 꽤 깨끗한 대안을 원했지만 더 나은 솔루션을 찾은 사람이 있습니까? iframes를 사용하는 방법은 약 130MB의 RAM을 사용하기 때문에 가난한 사람들의 기계가 느려질 수 있습니다.

도움이 되었습니까?

해결책

당신은 모든 것을 숨길 필요가 없습니다 select 루프 사용. 필요한 것은 다음과 같은 CSS 규칙입니다.

* html .hideSelects select { visibility: hidden; }

그리고 다음 JavaScript :

//hide:
document.body.className +=' hideSelects'

//show:
document.body.className = document.body.className.replace(' hideSelects', '');

(또는 좋아하는 것을 사용할 수 있습니다 addClass / removeClass 구현).

다른 팁

jQuery 호출 플러그인이 있습니다 bgiframe 따라서 iframe 메소드를 쉽게 구현할 수 있습니다.

개인적으로 웹 개발자로서 저는 더 이상 IE6의 사용자 경험에 관심이없는 시점입니다. 나는 그것을 가능한 한 "수정"에 가깝게 렌더링하고, 기능적인지 확인하지만 속도가 너무 나빠서 너무 나쁘다. 그들은 업그레이드 할 수 있습니다. IE7 (다른 모든 브라우저와 비교할 때 여전히 느리지 만)는 2 년 동안 (거의 하루까지) 나왔습니다. IE8은 곧 나올 것입니다. Firefox는 모든 플랫폼에서 사용할 수 있습니다. Safari는 또한 옵션입니다 (그리고 매우 빠른). 오페라는 대부분/모든 플랫폼에서 사용할 수 있습니다.

IE6는 7 년 전에 출시되었습니다. IMHO, 게으른 사용자와 무능한 IT 부서 (또는 웹 개발자 인 경우)를 제외하고 여전히 사용할 이유가 없습니다.

누구나 관심이 있으시면 여기에 일부 Shimming 코드가 있습니다.

* html .shimmed {
    _azimuth: expression(
        this.shimmed = this.shimmed || 'shimmed:'+this.insertAdjacentHTML('beforeBegin','<iframe style="filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);position:absolute;top:0px;left:0px;width:100%;height:100%" frameBorder=0 scrolling=no src="javascript:false;document.write('+"''"+');"></iframe>'),
        'inherit');
}

ref : 이 요점 ~에 의해 미묘한 학년 이 Zach Leatherman의 게시

IE7 이전에 드롭 다운 목록은 "창으로 된"컨트롤이었으며, 이는 브라우저가 합성하기보다는 Windows에 의해 직접 컨트롤로 렌더링되었음을 의미합니다. 따라서, 다른 합성 대조군에 대해 Z- 인덱싱을 지원할 수는 없었습니다.

DDL 위에 나타나려면 iframe과 같은 다른 창 컨트롤을 사용해야합니다. 또한 window.createpopup ()이라는 알려진 IE 전용 기능을 사용할 수 있으며, 이는 본질적으로 크롬리스 팝업을 만듭니다. 막을 수없는 클릭 아웃과 같은 제한 사항이 있지만 호버 메뉴 시스템을 구축하는 경우 실제로 도움이됩니다.

성가신 IE 버그에 대한 가장 간단하고 가장 우아한 솔루션은 다음과 같습니다. http://docs.jquery.com/plugins/bgiframe jQuery 사용.

나는 2 일 동안 플라이 오버 메뉴를 포함하여 모든 것이 역동적 인 WebSphere Portal / Portal 응용 프로그램과 함께 작동하도록 시도한 후 그 결론에 도달했습니다.

ActiveX 메소드도 있습니다. IE6의 일부 상자 대신 ActiveX 컨트롤을 사용하려면 조건부 코드를 작성해야합니다. 거기에 데모 스크립트 기술을 보여줍니다 여기에서 더 자세히 논의합니다.

업데이트 : Active-X 컨트롤이 사용자의 컴퓨터에 있으려면 MS Office가 필요한 것으로 보입니다. 이론적으로, 어딘가에 그것을 포함시키는 것이 가능할 수도 있지만, 그것은 훨씬 더 지저분 해지고 있습니다.

나는 많은 사람들이 자신의 팁을 제안했다는 것을 알고 있지만, 제 경우에는 단순히 아래와 같이 jQuery를 사용하여 선택을 숨기고 있습니다.

$(':date').dateinput({
    format: 'dd/mm/yyyy',
    onBeforeShow: function(event) {
        $('select').hide();
    },
    onHide: function(event) {
        $('select').show();
    }
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top