3

我在我的网站上安装了 dynatree 1.2.4 以显示来自电子邮件存档解决方案的一系列文件夹。通过 AJAX 检索文件夹，然后在调用 dynatree 代码之前对其进行格式化

function folders_loaded(json) {
  $("#folder_list").html("<ul id=\"folder_list_ul\"></ul>");
  for (folder in json.allfolders) {
    processFolder(json.allfolders[folder], "folder_list_ul")
  }

  $("#folder_list").dynatree({
      onActivate: function (node) {
          //do stuff here
      },
      onClick: function (node, event) {
          //do stuff here
      }
  });
}
function processFolder(folder, target_id) {
  //console.log(JSON.stringify(folder));
  var fid = folder.folder_id;

  $("#" + target_id).append("<li id=\"folder_id_" + fid + "\"  class=\"folder\" data=\"folder_id: " + fid + "\">" + folder.name);
  $("#folder_id_" + folder.folder_id).append("<ul id=\"folder_list_" + fid + "\"></ul>")
  for(f in folder.folders) {
    processFolder(folder.folders[f],"folder_list_" + fid);
  } 
  $("#" + target_id).append("</li>");  
}

该函数processFolder将一个列表项添加到目标无序列表，然后为子文件夹创建另一个无序列表。 processFolders然后再次调用以处理子文件夹。

这是json对象的一部分

{
   "allfolders":{
      "Calendar":{
         "folders":{},
         "folder_id":36,
         "name":"Calendar"
      },

      "INBOX":{
         "folders":{
            "Archive Folders":{
               "folders":{
                  "Emails Received 04-09-2008 to 01-09-2010 ":{
                     "folders":{ },
                     "folder_id":42,
                     "name":"Emails Received 04-09-2008 to 01-09-2010 "
                  },
                  "E-mails received 04-2005 to 05-2005":{
                     "folders":{},
                     "folder_id":43,
                     "name":"E-mails received 04-2005 to 05-2005"
                  },
               "folder_id":41,
               "name":"Archive Folders"
            }
         },
         "folder_id":40,
         "name":"INBOX"
      }
  }
}

folder_list div 的 CSS 如下

#folder_list 
{
  position:absolute;
  top:0;
  left:0;
  width:150px;

  height:100%;
  z-index:10;
  white-space:nowrap;
}

这些文件夹在 Chrome 中呈现得很漂亮，但在 IE 中，名称相对较长的文件夹会换行到下一行。

左边的图像显示了我在 IE 中看到的内容，而右边的屏幕截图显示了 Chrome。

这是IE的截图          这是Chrome的截图

我还尝试添加white-space:nowrap到 folder_list div 中的列表项

#folder_list, #folder_list li
{
  white-space:nowrap;
}

有没有人在 IE 中看到过这种行为，你做了什么来解决这个问题？

4

2 回答 2

0

增加宽度，然后尝试

#folder_list 
{
  width:180px; 
}
于 2013-10-18T05:21:32.860 回答
0

我终于找到了答案。我不得不将它添加到我的 CSS 文件中。

ul.dynatree-container li>span 
{
  display:inline-block !important;
  white-space:nowrap;
}

展示片似乎是解决这个问题的最大关键。

于 2013-10-22T19:52:12.040 回答