HTML4切片表格升级HTML5后无法消除多余空白的技术求助

问题原因 #

HTML5 规范下浏览器默认样式与旧版HTML4存在差异，你当前的CSS缺少必要的默认样式重置，是多余空白出现的核心原因，遗漏的重置项包括：

• 未清除body默认外边距
• 未重置表格td的默认内边距
• 未设置td的行高属性，仅设置font-size:0无法完全消除行高带来的空隙
• 未清除img标签的默认边框

修复代码 #

将你页面中<style>标签内的所有代码替换为以下内容即可：

/* 全局重置所有元素的默认内外边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #000;
}
table.Table_01 {
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
}
table.Table_01 img {
  display: block;
  border: none;
}
table.Table_01 td {
  font-size: 0;
  line-height: 0;
  padding: 0;
}

补充验证点 #

如果替换后仍有局部空隙，可单独检查对应位置的切片图片导出尺寸，是否和代码中<img>标签标注的width、height属性完全一致，旧版Photoshop导出切片时偶尔会出现1px的尺寸偏差。

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