0

Google マップ要素と jquery UI アコーディオン/タブ ベースのサイドバーを使用して Web ページを開発しています。ほとんどの最新のブラウザーではすべてがうまく機能していますが、IE7 ではいくつか問題がありました。Web ページはここでホストされています: http://jeffandkelly.net/map

このページでは多くのことが行われています。通常、jsfiddle を作成しようとしますが、そのサイトを IE7 で動作させることができませんでした。私はすでに IE7 固有のハックを多数採用しており、今では状況はかなり良くなっています。ただし、まだいくつかの問題があります。

私のサイドバーは、2 つの要素を持つ jquery UI アコーディオンで構成されています。2 番目の要素には jquery UI タブ コントロールがあり、各タブ内にはいくつかの<div>要素があります。IE7 (左に表示) と Chrome (右に表示) で正しく動作しないのは、これらの要素です。

ie7 と chrome ページのレンダリング http://jeffandkelly.net/map/ie7-vs-chrome.jpg

まず、これらの要素のヘッダーを非表示にする CSS ルールがあります (「安全な薬の廃棄場所」というテキスト)。

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

CSS:

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

しかし、IE7 はそのルールを適用しません。次に、IE7 はそこにあるはずのコンテンツを隠します (F12 ツールは要素が DOM にあることを示しますが、高さは 0 です)。

助けていただければ幸いです。また、次のステップについてのアドバイスもいただければ幸いです。

4

1 に答える 1

0

コードに複数の問題があったことが判明しました。まず、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

この答えが他の誰かを助けることができることを願っています！

于 2013-02-13T17:54:06.447 に答える