0

我正在开发一个带有谷歌地图元素和一个基于 jquery UI 手风琴/标签的侧边栏的网页。在大多数现代浏览器中一切都运行良好，但我在使用 IE7 时遇到了一些问题。网页托管在这里：http: //jeffandkelly.net/map

页面中发生了很多事情；通常我会尝试创建一个 jsfiddle，但我无法让该站点在 IE7 中运行。我已经使用了许多特定于 IE7 的 hack，现在情况看起来好多了。但是，我仍然有一些问题。

我的侧边栏包含一个带有 2 个元素的 jquery UI 手风琴。在第二个元素中是一个 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 回答