Javascript获取数据但IE无法正确显示数据

Question

我不确定原因或如何清楚地解释它，但我的网页用户界面在firefox和crome中都很棒。

我使用httprequest动态获取数据并在UI中显示信息，但只有IE无法正确显示数据。

我使用块来更改innerHTML取决于返回的数据，并且UI是<select>和<ul><li>。 我的块就是这样：

<ul id="roomlist" class="room_menu">
    <li id="allroom" class="txtunderline" style="text-align: right;">All Room</li>
</ul>

有一个名为'allroom'的原始li，在从服务器获取数据后，块'roomlist'将改变innerHTML。

在函数onreadystatechange中，我得到一些数据并放入数组，然后更改房间列表如：

首先，添加名为'createroom'的最后一个li

var createRoom="<li id=\"createroom\" class=\"txtunderline\"><div style=\"text-align: right;\">"+"CreateRooms"+"</div></li>";
$("#allroom").after(createRoom);

然后添加每个li的房间，但IE（我试过IE8，IE10）只显示了所有房间和createroom，其他人没有显示。我猜也许是因为其他<li>是自定义的图像，如：

var oldRoom="<li id=\"room"+index+"\">";
oldRoom+="<table style=\"width: 100%; position: relative; top: -2px; left: -2px;\"><tr><td><img width=\"28px\" height=\"28px\" src=\"images/location/" + locatImg[index] + "\" /></td><td align=\"right\">" + locatInfo[index]+"</td></tr></table></li>";
$("#createroom").before(oldRoom);

结果可能是crome或firefox中的结果：

但在IE中：

如果我在google中查看DOM将是：

我使用<select>来显示数据也是空的。

我已经通过alert数据进行了调试，并且alert功能正常（可以使用javascript），但是当我提醒数据时，警报未被触发。它让我觉得可能出现了问题，因此在错误解决之前警报不会弹出。（但IE的状态栏没有显示任何错误消息）

我使用jQuery，版本是：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

我听说自2.0版本发布以来jQuery不兼容，但我的版本似乎不是2.0版本？

其他页面中的相同类型列表（<ul><li>对）显示良好，并且没有图像添加到列表中。

我击败了我的脑筋，希望有人能帮助我找出真正的问题，任何帮助都会有所帮助！

编辑：对不起，我尝试简化列表，只显示如下文字：

var oldRoom="<li id=\"room"+index+"\">" + locatInfo[index] + "</li>";
$("#createroom").before(oldRoom);

在IE中它仍然是相同的：

在crome中，结构是：

Answer 1

尝试重新设计代码以使用较少的内联CSS，并将表格取出。您的方法非常分散，您可能会遇到样式冲突或其他问题。例如，position样式可能是您问题的根源，但很难知道，因为您的标记不是非常语义。

应该注意到你是appearing to use tables incorrectly，但是你可能只是遗漏了很多额外的房间信息，这些信息会使这成为一个表格信息列表。

如果您只使用图标显示房间，则可以使用所需的背景图像制作一系列CSS类，然后将正确的类分配给<li>。

例如，您的CSS可以包括：

ul#roomList, ul#roomList li {
  padding: 0;
  margin: 0;
  list-style: none;
}

ul#roomList li {
  width: 10em;
  height: 28px;
  text-align: right;
  text-decoration: underline;
  background-color: #A0A0A0;
}

ul#roomList li.roomType1 {
  background-image: url('/images/room1.png');
}

ul#roomList li.roomType2 {
  background-image: url('/images/room3.png');
}

ul#roomList li.roomType3 {
  background-image: url('/images/room3.png');
}

在您的HTML中，您只需使用：

<ul id="roomList">
  <li class="roomType3">Some text for room 3</li>
  <li class="roomType1">Some text for room 1</li>
</ul>

但是，如果您确实想要显示表格数据，则不应使用无序列表。相反，您应该只使用表，然后根据需要附加行（<tr>）。请确保您没有将“所有房间”和“创建房间”功能按钮放入表格中，因为这些不是表格数据。

当您尝试在搜索引擎上宣传您的酒店时，很多这一点变得很重要。正确的语义布局更容易让搜索引擎进行剖析和广告。

Answer 2

好的，当我想更改列表的innerHTML时，我发现IE中的httprequest太慢而无法获取数据。这是我的错，我想我应该确保在更改UI之前收到数据。