html中的图标和文本未呈现

我有一个HTML渲染问题,最初我是从模拟加载数据,它看起来像这样.

当我注释掉添加了模拟数据的代码时,我的页面没有正确呈现所有元素

如果我将鼠标悬停在一个元素上,它会渲染它

如果我添加一个空行

    

        

            

               

               
Task
            
        
        
 
            
                                                                                                                                                    
            

                
complete
                
description
            
        
    

有用

代码看起来在模拟数据中添加了

var load_todo_list_tasks = function () {
    var loadedData = [
    {
        "comment": "",
        "task": "Go see a chiro",
        "task_id": 123,
        "completed": false,
        "completed_date": "",
        "set_date":"07/08/13"
    }];

    if (loadedData.length>0){
        $("#tasks_completed").hide();
        $("#tasks_home_completed").hide();
        numberTasksForToday=0;
        for (var i = 0; i < loadedData.length; i++) {
            var data = loadedData[i];
            numberTasksForToday++;
            displayTodoListTask(data);
        }
    }
};

var displayTodoListTask = function (data) {
    var checked = "";
    if (data['completed'] === false) {
        var completedStyle = "display:none\"";
        var taskStyle = "";
    } else {
        var completedStyle = "";
        var taskStyle = "display:none\"";
    }
    if (data['completed_date'] == "") {
        var d = new Date();
        var month = d.getMonth() + 1;
        var day = d.getDate();
        data['completed_date'] = (day < 10 ? '0' : '') + day + '/' +
        (month < 10 ? '0' : '') + month + '/' +
        String(d.getFullYear()).substring(2, 4);
    }
    var html =
        "" +
            "complete" +
            "" + data['task'] + "" +
        "";
    $("#todoListTasks").prepend(html);

    var html =
        "" +
            "complete" +
            "" + data['task'] + "" +
        "";
    $("#todoListTasksHome").prepend(html);

};

我不知道如何调试它,因为控制台日志中没有任何错误,任何想法？

    
        
         Home 
    

.   background-color: rgb(255, 255, 255);
.   border-bottom-color: rgb(229, 229, 229);
.   border-bottom-style: solid;
.   border-bottom-width: 1px;
.   border-image-outset: 0px;
.   border-image-repeat: stretch;
.   border-image-slice: 100%;
.   border-image-source: none;
.   border-image-width: 1;
.   border-left-color: rgb(57, 57, 57);
.   border-left-style: none;
.   border-left-width: 0px;
.   border-right-color: rgb(57, 57, 57);
.   border-right-style: none;
.   border-right-width: 0px;
.   border-top-color: rgb(252, 252, 252);
.   border-top-style: solid;
.   border-top-width: 1px;
.   box-sizing: border-box;
.   color: rgb(57, 57, 57);
.   display: block;
.   font-family: 'Open Sans';
.   font-size: 13px;
.   height: 40px;
.   line-height: 19.5px;
.   list-style-image: none;
.   list-style-position: outside;
.   list-style-type: none;
.   margin-bottom: 0px;
.   margin-left: 0px;
.   margin-right: 0px;
.   margin-top: 0px;
.   padding-bottom: 0px;
.   padding-left: 0px;
.   padding-right: 0px;
.   padding-top: 0px;
.   position: relative;
.   text-align: left;
.   width: 42px;

为主页图标

.   -webkit-font-smoothing: antialiased;
.   background-image: none;
.   background-position: 0% 0%;
.   background-repeat: repeat;
.   box-sizing: border-box;
.   color: rgb(43, 125, 188);
.   cursor: auto;
.   display: inline-block;
.   font-family: FontAwesome;
.   font-size: 18px;
.   font-style: normal;
.   font-weight: normal;
.   height: 36px;
.   line-height: 36px;
.   list-style-image: none;
.   list-style-position: outside;
.   list-style-type: none;
.   margin-right: 2px;
.   margin-top: 0px;
.   min-width: 30px;
.   text-align: center;
.   text-decoration: none solid rgb(43, 125, 188);
.   text-shadow: none;
.   vertical-align: middle;
.   width: 30px;

我相信它可能与 https://productforums.google.com/forum/#!topic/chrome/U5wefygGAow有关