HTML选择渲染是破解firefox

Question

我在firefox上的editinline有问题，只在firefox上有问题。

当我点击firefox发生的字段时，下拉列表显示不正常。 我可以选择第一个值而其他值不会出现：

https://cloud.githubusercontent.com/assets/7290852/23408294/d2a6ee3a-fdc7-11e6-8a79-5397ded3cadd.png

使用chrome一切都很好：

https://cloud.githubusercontent.com/assets/7290852/23408351/063135a8-fdc8-11e6-87d9-2131b0edb656.png

一切正常我只是这个问题而且我真的不知道如何修复它。

如果你需要我的HTML。非常感谢

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo $base_url; ?>application/assets/css/doc.css">
<link rel="stylesheet" href="<?php echo $base_url; ?>application/assets/css/default.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/dataTables.jqueryui.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="<?php echo $base_url; ?>application/assets/js/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Latest compiled and minified JavaScript -->

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>




<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.11/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script type="text/javascript" src="<?php echo $base_url; ?>application/js/dataTables.cellEdit.js"></script>    
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>


<style>

th { font-size: 12px; }
td { font-size: 11px; }

/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(<?php echo $base_url; ?>application/assets/img/default.gif) center no-repeat #fff;
}   

th input {
        width: 90%;
       }

 .btn-primary.outline {
    border: 2px solid #003366;
  }
</style>

<script type="text/javascript">
function saveToRisk(editableObj,column,id) {
    //alert(id);
    $(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
    $.ajax({
        url: "<?php echo $base_url; ?>project/edit_inline_risk",
        type: "POST",
        data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
        success: function(data){
            $(editableObj).css("background","#FDFDFD");
        }        
    });
}

function saveToDecision(editableObj,column,id) {
    //alert(id);
    $(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
    $.ajax({
        url: "<?php echo $base_url; ?>project/edit_inline_decision",
        type: "POST",
        data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
        success: function(data){
            $(editableObj).css("background","#FDFDFD");
        }        
    });
}

function saveToAction(editableObj,column,id) {
    //alert(id);
    $(editableObj).css("background","#FFF url(loaderIcon.gif) no-repeat right");
    $.ajax({
        url: "<?php echo $base_url; ?>project/edit_inline_action",
        type: "POST",
        data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id,
        success: function(data){
            $(editableObj).css("background","#FDFDFD");
        }        
    });
}

$(window).load(function() {
    $(".loader").fadeOut("1000");
})




function delete_decision(decision_id)
{
    $("#deleteModal_"+decision_id).modal('show');
}


function delete_action(action_id)
{
    $("#deleteModal_"+action_id).modal('show');
}


function deleterisk(project_id){

    $("#deleteModal_"+project_id).modal('show');

}

function edit_action(action_id)
{
    $("#edit_"+action_id).modal('show');
}

function editrisk(project_id){

    $("#edit_"+project_id).modal('show');
}

function edit_issue(issue_id)
{
    $("#edit_"+issue_id).modal('show');
}
function delete_issue(issue_num){

    $("#deleteModal_"+issue_num).modal('show');
}

function edit_decision(decision_id)
{
    $("#edit_"+decision_id).modal('show');
}

function fnExcelReport4() {
    var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
    tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';

    tab_text = tab_text + '<x:Name>Actions Sheet</x:Name>';

    tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
    tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';

    tab_text = tab_text + "<table border='1px'>";
    tab_text = tab_text + $('#example4').html();
    tab_text = tab_text + '</table></body></html>';

    var data_type = 'data:application/vnd.ms-excel';

    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
        if (window.navigator.msSaveBlob) {
            var blob = new Blob([tab_text], {
                type: "application/csv;charset=utf-8;"
            });
            navigator.msSaveBlob(blob, 'Action.xls');
        }
    } else {
        $('#test').attr('href', data_type + ', ' + encodeURIComponent(tab_text));
        $('#test').attr('download', 'Action.xls');
    }

}



tinymce.init({
                selector:".risk_descr"
            })


$(function(){
    $('#add_submit').click(function() {

            $( "[id='my_form']").submit(function() {


                if($('#add_due_date').val() == "" || $("#add_owner_group").val() == "" || $("#add_action_point").val() == "" || $("#add_category").val() == ""){

                    alert("Please fill in all the required fields ");
                    return false;
                }

            }); 


    });
});

$(document).ready(function() {




 $('.owner, .owner_label').hide();
      $('.owner_group').on('change', function() {
       var owner_group_id =  $(this).val();

       if (owner_group_id!="")
       {
        // alert(owner_group_id);

         $.ajax({
              type: "POST",
              url: "<?php echo $base_url; ?>project/owner_by_group", 
              dataType: "json",
              data: {group_id: owner_group_id},
              success: function(user_list) {
                 $('.owner').empty(); // On vide la liste des users
                  $('.owner, .owner_label').show();


                    $.each(user_list, function(key, v) {
                        //alert(user_list);
                        $.each(user_list[key], function(user_id, name){

                        });

                         $('.owner').append($('<option value="'+user_list[key].user_id+'">'+user_list[key].name+'</option>'));
                    });

                   // for(var i = 0,i<user_list)
                }
            });
        }
    });  





});

</script>







    <div id="action_project" class="col-xs-12">
        <br />


            <?php if($role[0]['role'] == 'Project_manager' || $user_info[0]['group_id'] == '1' || $role[0]['role'] == 'Project_member') {?>
             <button id="add_action" name="add_action" class="btn btn-default col-xs-3" style="margin-bottom: 1%"><strong>Add Action</strong> </button> 
            <?php }?>


        <a href="#" id="test"  class="col-xs-3" onClick="javascript:fnExcelReport4();"><img  src="<?php echo $base_url; ?>application/assets/img/excel-icon.png" height=40 width=40 /></a>






        <table cellpadding="0" cellspacing="0" border="0" class="display" id="example2" > 
            <thead> 
                <tr> 
                    <th>Action n°</th> 
                    <th>Status</th> 
                    <th>Review</th>
                    <th>Open Date</th> 
                    <th>Category</th>
                    <th>Action Point</th>
                    <th>Priority</th>
                    <th>Due Date</th>
                    <th>Team</th>
                    <th>Owner</th>
                    <th>Comment</th>
                    <th>Edit/Delete</th>

                </tr> 
            </thead> 
            <tfoot> 
                <tr> 
                    <th>Action n°</th> 
                    <th>Status</th> 
                    <th>Review</th>
                    <th>Open Date</th> 
                    <th>Category</th>
                    <th>Action Point</th>
                    <th>Priority</th>
                    <th>Due Date</th>
                    <th>Team</th>
                    <th>Owner</th>
                    <th>Comment</th>
                    <th>Edit/Delete</th>

                </tr> 
            </tfoot> 
            <tbody> 


                <input type="text" id="role_manager_member" value="<?php echo $role[0]['role']; ?>" style="display: none;"/>
                <input type="text" id="role_admin" value="<?php echo $user_info[0]['group_id']; ?>" style="display: none;" />

                <?php 
                //error_log(print_r($project,false));

                for($i=0;$i<count($project_action_info);$i++)
                { //log_message('error','COUNT'.count($project_action_info));?>
                    <tr class="risk_number"  value="<?php echo $project_action_info[$i]['action_num']; ?>">


                        <td><?php echo $project_action_info[$i]['action_num']; ?></td>
                        <td <?php if($role[0]['role'] == 'Project_manager' || $user_info[0]['group_id'] == '1' || $role[0]['role'] == 'Project_member') {echo 'contenteditable="true"';}else{echo 'contenteditable="false"';} ?> onBlur="saveToAction(this,'status_id','<?php echo $project_action_info[$i]['action_id']; ?>')" onClick="showEdit(this);"><?php echo $project_action_info[$i]['status_descr']; ?></td>
                        <td <?php if($role[0]['role'] == 'Project_manager' || $user_info[0]['group_id'] == '1' || $role[0]['role'] == 'Project_member') {echo 'contenteditable="true"';}else{echo 'contenteditable="false"';} ?> onBlur="saveToAction(this,'review','<?php echo $project_action_info[$i]['action_id']; ?>')" onClick="showEdit(this);"><?php echo $project_action_info[$i]['review']; ?></td>
                        <td><?php echo $project_action_info[$i]['open_date']; ?></td>
                        <td <?php if($role[0]['role'] == 'Project_manager' || $user_info[0]['group_id'] == '1' || $role[0]['role'] == 'Project_member') {echo 'contenteditable="true"';}else{echo 'contenteditable="false"';} ?> onBlur="saveToAction(this,'category','<?php echo $project_action_info[$i]['action_id']; ?>')" onClick="showEdit(this);"><?php echo $project_action_info[$i]['category']; ?></td>
                        <td><?php echo $project_action_info[$i]['action_point']; ?></td>
                        <td <?php if($role[0]['role'] == 'Project_manager' || $user_info[0]['group_id'] == '1' || $role[0]['role'] == 'Project_member') {echo 'contenteditable="true"';}else{echo 'contenteditable="false"';} ?> onBlur="saveToAction(this,'priority','<?php echo $project_action_info[$i]['action_id']; ?>')" onClick="showEdit(this);"><?php echo $project_action_info[$i]['priority']; ?></td>
                        <td><?php echo $project_action_info[$i]['due_date']; ?></td>
                        <td><?php echo $project_action_info[$i]['team_code']; ?></td>
                        <td><?php echo $project_action_info[$i]['owner']; ?></td>
                        <td><?php echo $project_action_info[$i]['comment']; ?></td>
                        <td>
                            <?php if($role[0]['role'] == 'Project_manager' || $user_info[0]['group_id'] == '1' || $role[0]['role'] == 'Project_member') { ?>
                            <img class="edit" src="<?php echo $base_url; ?>application/assets/img/file_edit.png" alt="edit" border=1 height=20 width=20 onclick="location.href='<?php echo $base_url; ?>project/modify_action/<?php echo $project_info[0]['project_id'].'/'; ?><?php echo $project_action_info[$i]['action_id']; ?>';" />
                            <img class="delete"  src="<?php echo $base_url; ?>application/assets/img/notification_error.png" alt="delete" border=1 height=20 width=20 onclick="delete_action(<?php echo $project_action_info[$i]['action_id']; ?>);"/>
                            <?php } ?>
                        </td>

                    </tr>




                    <div class="modal fade" id="deleteModal_<?php echo $project_action_info[$i]['action_id']; ?>" tabindex="-1" role="dialog">
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">Delete Risk</h4>
                          </div>
                          <div class="modal-body">

                            <p><div class="alert alert-danger" role="alert">Do you really want to delete this Action: <?php echo $project_action_info[$i]['action_num']; ?></div></p>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-danger" onclick="location.href='<?php echo $base_url; ?>project/delete_action/<?php echo $project_action_info[$i]['action_id']; ?>/<?php echo $project_action_info[$i]['project_id']; ?>';">Delete</button>
                          </div>
                        </div><!-- /.modal-content -->
                      </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->









                    <?php } ?>  
        </tbody>

        </table>



        <div class="modal fade" id="add_action_modal" tabindex="-1" role="dialog">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Add Action</h4>
                  </div>
                  <form method="post" action="<?php echo $base_url; ?>project/add_action/<?php echo $project_info[0]['project_id']; ?>" id="my_form">
                  <div class="modal-body">

                    <input type="text" name="user_name" value="<?php echo $user_info[0]['firstname'].' '.$user_info[0]['lastname']; ?>" style="display: none;"/>
                     <input type="text" name="project_id" value="<?php echo $project_info[0]['project_id']; ?>" style="display: none;"/> 

                  <h6 style="color: red;"><strong>Fields with '*' are required</strong></h6>
                  <div class="form-group">
                    <label for="project_name">Status<strong style="color:red;"> *</strong></label>
                        <?php echo form_error('status'); ?>
                        <select class="form-control" name="status">
                        <?php 

                         // echo '<option value="'.$project_risk_info[$i]['status_id'].'" >'.$project_risk_info[$i]['status'].'</option>';
                        foreach($status_list as $row)
                        {

                          echo '<option value="'.$row->status_id.'" >'.$row->status_descr.'</option>';
                        }
                        ?>
                        </select>
                  </div>
                  <div class="form-group">
                    <label for="impact_effect">Category<strong style="color:red;"> *</strong></label>
                    <?php echo form_error('category'); ?>
                    <select class="form-control" name="category">
                        <?php 


                        foreach($category as $row)
                        {

                          echo '<option value="'.$row->category_id.'" >'.$row->category.'</option>';
                        }
                        ?>
                        </select>
                  </div>

                  <div class="form-group">
                    <label for="project_name">Action Point<strong style="color:red;"> *</strong></label>
                    <?php echo form_error('risk_descr'); ?>
                    <textarea name="action_point" class="risk_descr" id="add_action_point"></textarea>
                  </div>

                   <div class="form-group">
                    <label for="priority">Priority<strong style="color:red;"> *</strong></label>
                    <?php echo form_error('priority'); ?>
                    <select class="form-control" name="priority" id="add_priority">


                        <option value="Very High">Very Low</option>
                        <option value="High">Low</option>
                        <option value="Medium">Medium</option>
                        <option value="Low">High</option>
                        <option value="Very Low">Very High</option>

                    </select>
                  </div>
                  <div class="form-group">
                    <label for="due_date">Due Date<strong style="color:red;"> *</strong></label>
                    <input type="text" name="due_date" class="due_date"  class="form-control" id="add_due_date"/> 
                  </div>

                  <div class="form-group">
                    <label for="owner_group_issue">Team<strong style="color:red;"> *</strong></label>
                        <?php echo form_error('owner_group_issue'); ?>
                        <select class="form-control owner_group" id="owner_group" name="team_add" id="add_owner_group">
                        <?php 

                         echo '<option value=""></option>';
                        foreach($teams as $row)
                        {

                          echo '<option value="'.$row->Team_id.'">'.$row->Team_code.'</option>';
                        }
                        ?>
                        </select>
                  </div>

                  <div class="form-group">
                    <label for="owner_add" class="owner_label">Owner<strong style="color:red;"> *</strong></label>
                        <?php echo form_error('owner_id'); ?>
                        <select class="form-control owner" class="owner" name="owner_add" id="add_owner">

                             <?php echo '<option value=""></option>'; //echo '<option value="'.$project_risk_info[$i]['owner_id'].'">'.$project_risk_info[$i]['owner'].'</option>'; ?>
                        </select>
                  </div>

                  <div class="form-group">
                    <label for="action">Comment</label>
                    <?php echo form_error('comment'); ?>
                   <textarea name="comment" class="risk_descr"></textarea>
                 </div>



                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" id="add_submit" >Validate</button>
                  </div>
                  </form>
                </div><!-- /.modal-content -->
              </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->

        </div>




    </div>















<script type="text/javascript">




$(document).ready(function() {


    $(window).load(function() {
        // Animate loader off screen
        $(".se-pre-con").fadeOut("slow");;
    });

    $(".due_date").datepicker({ dateFormat: 'yy-mm-dd' });


    $('#example tfoot th').each( function (i) {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" data-index="'+i+'" />' );
    } ); 

   var table=  $('#example').DataTable(
                {
                "columnDefs": [
                    { "width": "10%", "targets": 0 }],
                    "oLanguage": {
                            "sSearch": "Search all columns:"}
                });




    table.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );


    $('#example2 tfoot th').each( function (i) {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" data-index="'+i+'" />' );
    } );            

    var table2 =  $('#example2').DataTable(
                {
                "columnDefs": [
                    { "width": "10%", "targets": 0 }]
                }); 


   if($("#role_manager_member").val() == 'Viewers' && $("#role_admin").val() != '1' )
   {
        var column_edit = [];
   }else{

        var column_edit= [0,1,2,3,4,6,7];
   }

   table2.MakeCellsEditable({
        "onUpdate": saveToAction,
        "inputCss":'my-input-class',
        "columns": column_edit,
        "allowNulls": {
            "columns": [1],
            "errorClass": 'error'
        },
        "confirmationButton": { 
            "confirmCss": 'my-confirm-class',
            "cancelCss": 'my-cancel-class'
        },
        "inputTypes": [
            {
                "column":0, 
                "type":"text", 
                "options":null 
            }, 
            {
                "column":1, 
                "type": "list",
                "options":<?php echo $list_status; ?>
            },
            {
                "column":2, 
                "type": "list",
                "options":[
                    { "value": "Y", "display": "Y" },
                    { "value": "N", "display": "N" },

                ]
            },

            {
                "column":3,
                "type":"date",
                "options":null
            },
            {
                "column":4, 
                "type": "list",
                "options":<?php echo $list_category; ?>
            },
            {
                "column":6,
                "type":"list",
                "options":[
                    { "value": "Critical", "display": "Critical" },
                    { "value": "High", "display": "High" },
                    { "value": "Medium", "display": "Medium" },
                    { "value": "Low", "display": "Low" },
                    { "value": "Very Low", "display": "Very Low" }
                ]
            },
             {
                "column":7,
                "type":"date",
                "options":null
            }





        ]
    });

   table2.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );

    $('#example3 tfoot th').each( function (i) {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" data-index="'+i+'" />' );
    } ); 

    var table3=  $('#example3').DataTable(
                {
                "columnDefs": [
                    { "width": "10%", "targets": 0 }]
                });                     





    table3.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );

    $('#example4 tfoot th').each( function (i) {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" data-index="'+i+'" />' );
    } ); 

    var table4= $('#example4').DataTable(
                {
                "columnDefs": [
                    { "width": "10%", "targets": 0 }]
                });     





    table4.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );    



    $('#add_action').click(function(){

        $('#add_action_modal').modal('show');
    });





} );
</script>