IE7은 일부 CSS 규칙을 무시하고 아코디언에서 일부 콘텐츠 높이를 제공하지 않는 것 같습니다.

Question

Google Maps 요소 및 jquery UI 아코디언/탭 기반 사이드 바를 사용하여 웹 페이지를 개발하고 있습니다. 대부분의 최신 브라우저에서 모든 것이 잘 작동하지만 IE7에 몇 가지 문제가 있습니다. 웹 페이지는 여기에서 호스팅됩니다 : http://jeffandkelly.net/map

페이지에 많은 내용이 있습니다. 일반적으로 jsfiddle을 만들려고했지만 IE7에서이 사이트를 사용할 수 없었습니다. IE7에 특화된 수많은 해킹을 이미 사용했고, 이제는 상황이 훨씬 나아졌습니다. 그러나, 나는 아직도 약간 문제점을 가지고있다.

내 사이드 ​​바는 2 개 요소로 구성된 jquery UI 아코디언으로 구성됩니다. 두 번째 요소에는 jquery UI 탭 컨트롤이 있고 각 탭에는 몇 가지 <div> 요소가 있습니다. IE7 (왼쪽 그림)과 Chrome (그림 오른쪽)에서 올바르게 작동하지 않는 요소입니다 (오른쪽 그림 참조).

<h3 class="map-popup-header>Safe Medicine Disposal Drop Off Location</h3> 

CSS : 모든

ie7 vs. chrome page rendering http://jeffandkelly.net/map/ie7-vs-chrome.jpg

첫째, (텍스트 "안전 의학 폐기 위치 드롭 오프") 이러한 요소의 헤더를 숨기고되어야 CSS 규칙을 가지고 :

.poi-holder .map-popup-header { 
    display: none; 
} 

그러나 IE7은 해당 규칙을 적용하지 않습니다. 둘째, IE7은 거기에 있어야하는 콘텐츠를 숨 깁니다 (F12 도구는 요소가 DOM에 있지만 높이가 0임을 보여줍니다).

도움을 받으려면 다음 단계를 수행하는 것이 좋습니다.

Answer 1

코드에 여러 문제가 있음이 드러났습니다. 첫째, IE7에서는 콘텐츠를 동적으로 만들 때 테이블에 <tbody> 요소를 포함해야합니다. 따라서 다음 코드는 주석 처리 된 줄없이 작동하지 않습니다.

var infoTable = document.createElement('table'); 
var infoTbody = document.createElement('tbody'); //required for IE7!! 
var infoTr = document.createElement('tr'); 
var infoTextTd = document.createElement('td'); 
var infoPhotoTd = document.createElement('td'); 
infoDiv.appendChild(infoTable); 
infoTable.appendChild(infoTbody); 
infoTbody.appendChild(infoTr); 
infoTr.appendChild(infoTextTd); 
infoTr.appendChild(infoPhotoTd); 

둘째, IE7은 CSS 규칙을 적용하지 않습니다이 동적으로 생성하는 컨텐츠 지정된 클래스는 element.setAttribute('class', className)를 사용하여 속성. element.className = className을 사용해야합니다.

var header = document.createElement('h3'); 
header.className = 'map-popup-header'; //works as expected in IE7 
var header = document.createElement('h3'); 
header.setAttribute('class','map-popup-header'); //doesn't work in IE7 

이 답변으로 다른 사람에게 도움이되기를 바랍니다.