IE의 jQuery UI 대화 상자 문제

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

문제

UI 대화 상자와 함께 새로운 jQuery 1.3.2 및 jQuery-ui-1.7 라이브러리를 사용하고 있습니다.여러 양식 요소(텍스트 상자, 확인란 등)가 포함된 div 태그가 있습니다.페이지가 로드되면 jQuery는 div를 대화 상자로 표시합니다.이것은 FF에서는 전혀 문제가 없지만 IE에서는 div의 높이가 잘못되었습니다.제목 표시줄에 내용의 일부만 표시됩니다.div를 생성할 때 높이를 명시적으로 설정했습니다.대화 상자를 연 후 높이 옵션을 설정하면 높이가 수정되지만 내용은 비어 있습니다(텍스트 상자의 상단 1/3 표시).대화 상자의 크기를 조정할 수 있도록 허용하고 IE에서 크기를 조정하면 제대로 작동하지만 IE 사용자가 내용을 보기 위해 크기를 조정하도록 강요하고 싶지는 않습니다.어떤 아이디어가 있나요?대화 상자를 만드는 데 사용하는 코드는 다음과 같습니다.

$('#dialogDiv').dialog({ 
    bgiframe: true, 
    height: 400, 
    width: 620, 
    modal: true, 
    draggable: true, 
    resizable: false, 
    close: function(event, ui) {
        if($('#agree').val() != '1')
            location.href = 'somepage.html';
    }
});
도움이 되었습니까?

해결책 6

나는 내 자신의 질문에 대답했다. 대화 상자의 높이 특성과 대화 상자 내의 요소 중 일부를 연주해야했습니다. 잘 전화 해!

다른 팁

Google 검색을 수행 한 후이 질문에 대한 진정한 답변을 찾았습니다. 호환되지 않는 DocType에 의해 발생합니다. 가십시오 http://osdir.com/ml/jquery-ui/2009-08/msg00388.html 자세한 내용은.

내 코드에서 시도해 보았고이 URL의 솔루션은 문제를 해결합니다.

IE7에서도 이와 동일한 문제가 발생하여 증상과 해결 방법을 자세히 살펴보았습니다.내용이 없는 더미 대화 상자를 만들면 높이가 올바르게 렌더링되는 것으로 나타났습니다.그래서 문제를 극복하기 위해 콘텐츠를 다르게 작성할 수 있는지 알아보기 위해 다양한 유형의 콘텐츠를 가지고 놀기 시작했습니다.불운.그러나 내가 발견한 것은 더 많은 콘텐츠를 추가할수록 IE7에서만 대화 상자가 짧아진다는 것입니다(숨겨진 항목도 약간 짧아집니다).따라서 단순한 콘텐츠는 그다지 눈에 띄는 효과를 내지 못할 가능성이 높습니다(따라서 이 문제에 대한 불만이 더 많지는 않습니다).내가 추가한 테이블과 많은 양식 항목은 매우 눈에 띄는 효과를 만들어 냈습니다.

높이를 자동으로 설정하면 어느 정도 잘 작동하지만 IE7은 여전히 ​​내 콘텐츠의 높이를 약 10픽셀 정도 너무 짧게 잘못 계산하므로(객체의 패딩 높이일 수 있음) jQuery가 스크롤 막대를 추가합니다.완벽하지는 않지만 다음 내용을 고려하면 수용 가능합니다.

다른 해결 방법을 찾지 못해 DOCTYPE 솔루션을 조사하기 시작했습니다.나는 우리 사이트의 DOCTYPE이 비록 올바르다고는 하지만 실제로는 모든 브라우저를 "Quirks Mode"로 설정하고 이것이 문제의 실제 원인이라는 것을 발견했습니다.jQuery가 쿼크 모드 문제를 지원하는지 의심스럽기 때문에 이것이 수정될 수 있을지 의심됩니다.

내 현재 DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

그것은 무엇이어야 하는가:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

이 오래된 DOCTYPE도 작동했습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">

따라서 DOCTYPE이 HTML 5 값이어야 하는 것은 아닙니다. <!DOCTYPE html>, IE7을 특수 모드 이외의 다른 모드로 설정하는 유효한 DOCTYPE(HTML 4 또는 5 - XHTML은 확실하지 않음)이어야 합니다(Firefox는 어느 쪽이든 괜찮습니다).보다:

http://en.wikipedia.org/wiki/Quirks_mode#Comparison_of_document_types

사이트의 DOCTYPE을 변경할 수 있는 옵션이 없으므로 자동 높이와 같은 다른 솔루션을 사용해야 합니다.jQuery 대화 상자를 사용할 때 이상한 모드와 표준 모드 사이에 다른 차이점이 있다는 것을 알았으므로 그 문제도 처리해야 합니다(즉, 글꼴 크기 비율은 IE7과 Firefox에서 다르게 누적됩니다).

나도 같은 문제를 발견했다. 예, 높이를 지정하지 않음으로써 대화 상자를 크기로 조정하고 내용을 표시합니다. 그러나 내용이 길어질 때 모달 대화 상자가 계속 커지는 것을 원하지 않습니다. 이상은 지정된 높이를 가진 대화 상자를 표시하는 것입니다. 사용자는 스크롤 막대를 사용하여 내용을 볼 수 있습니다. 이것은 Firefox에서 완벽하게 작동합니다. 누구든지 IE에 대한 해결책이 있습니까?

나는 다음과 같은 높이에 유닛을 제공함으로써 이것을 고칠 수있었습니다.

$(id).dialog({ modal: true, height: h + "px", width: w });

나는 DocType를 엉망으로 만들 필요가 없었습니다. 이것은 IE8, JQuery 1.4.4 및 jQuery UI 1.8.9에있었습니다.

-이것을 빨리 게시 할 것입니다. 그것은 Firefox에서 그것을 깨뜨립니다. 나를 무시하십시오!

픽셀에서 글꼴 크기를 사용할 때 비슷한 문제가 발생했습니다. 글꼴 크기 : 11px- 글꼴 크기 : 15px; CSS에서 IE9에서 높이 문제를 일으켰습니다. 글꼴 크기 : 16px; 그리고 IE9에서는 잘 작동합니다

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top