Firefox初始加载JavaScript未初始化？按钮渲染异常求助

看起来你碰到了浏览器渲染优化机制带来的小坑——因为初始时按钮的value和你JS里设置的内容完全一致，浏览器觉得没必要重新计算单元格布局，才导致了初始尺寸异常；点击后因为交互触发了重绘，尺寸就恢复正常了。这里有几个实用的解决方案：

方案1：强制触发DOM重绘重排 #

在你的ECM_do函数末尾添加一段代码，手动触发表格的重绘，让浏览器重新计算布局：

function ECM_do() {
  ECM_coloring(1, "#2EFEF7");
  ECM_coloring(2, "#2EFEF7");
  ECM_display();
  
  // 强制触发重绘
  const table = document.forms["ECM"].querySelector('table');
  table.style.display = 'none';
  void table.offsetHeight; // 读取offsetHeight会触发同步重排
  table.style.display = '';
}

这段代码通过短暂隐藏表格再恢复，强制浏览器重新计算所有元素的尺寸，就能解决初始布局异常的问题。

方案2：给内容添加微小差异触发更新 #

修改ECM_display函数，先给按钮设置一个临时的不同值，再设置回目标值，让浏览器认为内容有变化，从而触发布局更新：

function ECM_display() {
  const elem1 = document.forms["ECM"].elements[0];
  const elem2 = document.forms["ECM"].elements[1];
  
  // 先设置临时值，触发浏览器更新
  elem1.value = '_temp_';
  elem2.value = '_temp_';
  
  // 在下一帧设置目标值
  requestAnimationFrame(() => {
    elem1.value = " " + ECM_pos[0] + "o ";
    elem2.value = " " + ECM_pos[1] + " ";
  });
}

利用requestAnimationFrame确保临时值先被渲染，再替换成目标内容，这样浏览器就会重新计算单元格尺寸了。

方案3：给按钮设置固定尺寸 #

如果你的按钮尺寸是固定的，直接给按钮添加CSS固定宽高，从根源避免布局计算的问题：

input[name="ECM_button1"], input[name="ECM_button2"] {
  width: 40px;
  height: 30px;
  /* 可根据你的需求调整具体尺寸 */
}

这样不管内容怎么变化，按钮的尺寸都不会乱，自然也就不会出现单元格尺寸异常的问题。

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