基于HTML生成MS Word时页眉页脚出现无法手动删除的异常方块

页眉页脚两端消不掉的异常方块，是承载页眉/页脚定义的隐藏占位表格被Word错误解析产生的渲染残留：

• 原实现靠把表格向右挪900英寸、宽高设为1px的方式藏页眉页脚定义，Word解析时会给每个表格单元格保留默认边距和内容占位，就算设了溢出隐藏，这些占位还是会被拉回页眉页脚的首尾两端，生成没法手动选中删除的固定方块。
• 代码里残留的空标签、段落默认行高、1px的下边距，会被Word识别成独立占位块，让方块显示得更明显。

直接改3处代码，就能彻底消掉方块：

1. 重写隐藏占位表格的样式
   替换原来的.hdrftrtblCSS规则，彻底清掉表格的可视占位：

   table.hdrftrtbl {
       margin-left: -9999in;
       width: 0;
       height: 0;
       border: 0;
       border-collapse: collapse;
       padding: 0;
       visibility: hidden;
       mso-table-spacebetween: 0;
       mso-table-spaceafter: 0;
   }
   

   改动逻辑：把原来向右偏移900英寸的藏法改成向左直接移出可视范围，宽高强制设为0，清除表格边框和单元格间距，设置可见性隐藏，从根上不让Word给这个表格分配可视渲染空间。
2. 删干净无效占位元素
   把页眉/页脚代码里所有没有实际内容的空标签删掉，比如页脚部分的<span style='mso-tab-count:1'></span>，这类空标签会被Word当成独立内容块，生成额外占位。
3. 修正页眉页脚的段落样式
   替换原来的.MsoHeadFootCSS规则，清掉段落带来的多余占位：

   p.MsoHeadFoot,
   li.MsoHeadFoot,
   div.MsoHeadFoot,
   td.MsoHeadFoot {
       margin: 0;
       padding: 0;
       margin-bottom: 0;
       line-height: 0;
       tab-stops: center 50% right 100%;
       font-size: 12.0pt;
       mso-line-height-rule: exactly;
   }
   

   改动逻辑：去掉原来设的1px下边距，把行高压到0，消除段落本身的高度占位，不会再在页眉页脚两端留残留块。

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