Safari中AJAX响应出现空白行致页面布局异常问题

我正在开发志愿者管理系统的页面，实现通过AJAX完成志愿者职位分配：页面从数据库加载所有职位，每个职位旁的下拉选择框加载志愿者选项，选择后通过AJAX提交修改。该功能在Firefox中运行正常，但在Safari中，数据收发正常，但每次修改操作都会新增空白行，导致表格不断下移，无法定位原因。

PHP返回代码（内容正常）：

echo "Updated $column_name to $text";

相关代码如下：

<div id="msg"></div>
<div class="alert alert-danger" role="alert" id="error" style="display: none;">...</div>
<span id="result"></span>
<table align="center" class="adminMarshalPositions">
<tr>
<td class='adminEmail' width="5%" align="center"><b>No</b></td>
<td class='adminEmail' width="15%" align="center"><b>Name</b></td>
<td class='adminEmail' width="15%" align="center"><b>Person 1</b></td>
<td class='adminEmail' width="5%" align="center"><b>Qty</b></td>
<td class='adminEmail' width="15%" align="center"><b>Person 2</b></td>
</tr>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post"> 
<?php
**PHP SELECT STATEMENTS REMOVED**

    echo "<tr>";
    echo "<td class='adminEmail'>$positionNo</td>";
    echo "<td class='adminEmail'>$name</td>";

    echo "<td class='adminEmail' align='center'>";
        echo "<select name='person-1' class='marshal-select'>";
    if($person1 == '0') {
        echo "<option value='0'>Select Marshal</option>";
    }
    if($person1 != '0') {
        if($organisation == '') {
        echo "<option value='$person1'>$person1FirstName $person1LastName</option>";
        } else {
        echo "<option value='$person1'>$person1FirstName $person1LastName ($organisation)</option>";    
        }
        echo "<option value='0'>Select Marshal</option>";
    }
    $sql3 = "SELECT * FROM marshalTable ORDER BY lastName ASC, firstName ASC";  
    $result3 = mysqli_query($mysqli, $sql3);
    while ($row3 = mysqli_fetch_array($result3)){
    $newPerson1Id = $row3["id"];
    $newPerson1FirstName = $row3["firstName"];
    $newPerson1LastName = $row3["lastName"];
    $organisation2 = $row3["organisation"];
    $avaliable = $row3["avaliable"];    
    if ($avaliable == '1') {
    if($organisation2 == '') {
        echo "<option value='$newPerson1Id'>$newPerson1FirstName $newPerson1LastName</option>";
    } else {
        echo "<option value='$newPerson1Id'>$newPerson1FirstName $newPerson1LastName ($organisation2)</option>";    
    } }
   }
    echo "</select>";
    echo "</td>";

    echo "<td class='adminEmail' align='center'>";
        echo "<select name='qty' class='marshal-select'>";
    if($qty != '0') {
        echo "<option value='$qty'>$qty</option>";
    }
        echo "<option value='0'>0</option>";
        echo "<option value='1'>1</option>";
        echo "<option value='2'>2</option>";
        echo "<option value='3'>3</option>";
        echo "<option value='4'>4</option>";
        echo "<option value='5'>5</option>";
        echo "<option value='6'>6</option>";
        echo "<option value='7'>7</option>";
        echo "<option value='8'>8</option>";
        echo "<option value='9'>9</option>";
        echo "<option value='10'>10</option>";  
    echo "</select>";
    echo "</td>";


    echo "<td class='adminEmail' align='center'>";
        echo "<select name='person-2' class='marshal-select'>";
    if($person2 == '0') {
        echo "<option value='0'>Select Marshal</option>";
    }
    if($person2 != '0') {
        echo "<option value='$person2'>$person2FirstName $person2LastName</option>";
        echo "<option value='0'>Select Marshal</option>";
    }
    $sql3 = "SELECT * FROM marshalTable ORDER BY lastName ASC, firstName ASC";  
    $result3 = mysqli_query($mysqli, $sql3);
    while ($row3 = mysqli_fetch_array($result3)){
    $newPerson2Id = $row3["id"];
    $newPerson2FirstName = $row3["firstName"];
    $newPerson2LastName = $row3["lastName"];
    $avaliable = $row3["avaliable"];    
    if($avaliable == '1') {
        echo "<option value='$newPerson2Id'>$newPerson2FirstName $newPerson2LastName</option>";
    }}
    echo "</select>";
    echo "<input type='hidden' id='positionNo' name='positionNo' value='$positionNo' class='positionNo'>";
        echo "<input type='hidden' id='userID' name='userID' value='$userID' class='userID'>";
    echo "</td>";
    echo "</tr>";
}
?>
</form>
</table>
<script>
$(document).ready(function() {
  $('select.marshal-select').change(function() {
    let $select = $(this);

    var positionNo = $(this).parent().parent().find('td').find('.positionNo').val();
    var userID  = $('#userID').val();

    $.ajax({
      type: 'POST',
      url: 'lib/positionMarshalProcess.php',
      data: {
        selectFieldValue: $select.val(),
        changeCol: $select.prop('name'),
        positionId: positionNo,
        userID: userID
      },
      dataType: "html",
      success: function(data) {
                //alert(data);
                $.trim('#result');
                $('#result').html("<div class='alert alert-success'>"+data+"</div>");
            }
    });
  });
});
</script>

问题排查与修复方案 #

1. 修复AJAX中的无效trim调用 #

当前代码里的$.trim('#result');是错误用法，$.trim()仅用于处理字符串，不能直接传入DOM选择器。Safari对这类无效操作的处理逻辑与Firefox不同，可能导致生成空白节点。修改为：

success: function(data) {
    // 先清空容器再添加内容，同时清理返回数据的空白
    $('#result').empty().html("<div class='alert alert-success'>"+$.trim(data)+"</div>");
}

2. 清理PHP响应的多余空白 #

Safari对HTTP响应中的空白字符更敏感，确保positionMarshalProcess.php没有多余输出：

• 删除<?php标签前的所有空白、换行
• 在PHP输出后添加exit();终止脚本，避免意外输出：

echo "Updated $column_name to $text";
exit(); // 阻止脚本继续执行，防止输出多余内容

3. 修正HTML结构错误 #

页面中<script>标签放在了<table>内部，不符合HTML规范，Safari的DOM解析可能因此异常：

• 将jQuery引入脚本移到<table>外部，比如<body>标签开头或<table>之前
• 由于已经使用AJAX提交，包裹表格的<form>标签可以移除，避免DOM结构混乱

4. 通过CSS抑制空白节点 #

Safari可能将HTML中的换行、空格解析为空白文本节点，导致表格出现空白行，添加以下CSS：

.adminMarshalPositions {
    border-collapse: collapse;
}
.adminMarshalPositions tr, .adminMarshalPositions td {
    margin: 0;
    padding: 0;
}

内容的提问来源于stack exchange，提问作者JASH