HTML <input>复选框跨浏览器显示差异问题求助

我注意到你代码里的HTML字符串拼接存在一个关键语法错误，这大概率是导致Chrome无法渲染复选框的核心原因——你最后拼接的是<tr>标签，而不是用于闭合的</tr>。Chrome对HTML结构的合法性要求比Firefox更严格，这种未正确闭合的标签会引发DOM解析异常，进而导致元素无法正常渲染。

• 修复HTML字符串的标签闭合问题
  把你JavaScript中的这行代码：

  var tableData = "<tr><td><input id = '" + rowValue + "' class='col-sm-1' onclick='checkImage(this)' name='images[" + rowValue + "].isActiveDefault' type='checkbox'></td><td>Default</td>" + "<tr>";
  

  修改为：

  var tableData = "<tr><td><input id = '" + rowValue + "' class='col-sm-1' onclick='checkImage(this)' name='images[" + rowValue + "].isActiveDefault' type='checkbox'></td><td>Default</td></tr>";
  

  这里将末尾的<tr>替换为</tr>，确保表格行标签完整闭合。

• 可选优化：用原生DOM API创建元素（避免字符串拼接错误）
  如果经常遇到HTML字符串拼接的语法问题，推荐使用原生DOM API来创建元素，这种方式能彻底避免引号转义、标签闭合这类低级错误，同时在各浏览器中的表现更一致：

  function addImagerow(tableId) {
    var rowValue = parseInt(document.getElementById('image-add').value);
    
    // 创建表格行
    const tr = document.createElement('tr');
    
    // 创建第一个单元格和复选框
    const tdCheckbox = document.createElement('td');
    const checkbox = document.createElement('input');
    checkbox.id = rowValue;
    checkbox.className = 'col-sm-1';
    checkbox.addEventListener('click', () => checkImage(this));
    checkbox.name = `images[${rowValue}].isActiveDefault`;
    checkbox.type = 'checkbox';
    tdCheckbox.appendChild(checkbox);
    
    // 创建第二个单元格
    const tdLabel = document.createElement('td');
    tdLabel.textContent = 'Default';
    
    // 组装并添加到目标表格
    tr.appendChild(tdCheckbox);
    tr.appendChild(tdLabel);
    document.querySelector(tableId).appendChild(tr);
    
    // 更新计数器值
    document.getElementById('image-add').value = rowValue + 1;
  }
  

  这种方式不需要手动拼接HTML字符串，代码可读性和可维护性更强，也能减少跨浏览器兼容问题。

• 额外检查项

  • 验证col-sm-1类是否包含影响显示的CSS规则（比如display: none、visibility: hidden或者极端的宽高设置），部分CSS属性在Chrome和Firefox中的解析可能存在差异。
  • 确认tableId参数传入的是正确的选择器格式（比如#my-image-table），确保jQuery的appendTo能正确定位到目标表格元素。

完成以上修改后，动态生成的复选框应该能在Chrome和Firefox中正常显示了。

内容的提问来源于stack exchange，提问作者R.A.Munna