隐藏内容后表格高度变了：一条 IE8 时代的透明度笔记

2018 年处理表格时，我想让某些内容不可见，同时尽量保持有值、无值时的行高一致。使用 display:none 后布局发生变化，于是尝试了透明度。

“看不见”有几种不同含义

.removed { display: none; }
.reserved { visibility: hidden; }
.transparent { opacity: 0; }

display:none 不生成该元素的布局盒；visibility:hidden 通常保留空间但隐藏内容；opacity:0 则让元素透明，布局仍在，元素也仍可能接收鼠标操作和键盘焦点。MDN opacity

因此，透明不能直接当成禁用，也不能用于保护不该展示给用户的数据。需要隐藏表单控件时，还要考虑焦点和辅助技术语义，而不只是画面效果。

保持表格高度应先确定约束

透明度可能保留内容原本占据的空间，但不是所有表格行高问题的通用解法。单元格内边距、其他列内容、字体和固定尺寸同样会影响行高。

如果目标是保留占位，可以先评估 visibility:hidden；如果目标是确定的行高，则应检查表格结构与尺寸约束。不要让“恰好看起来一样”代替布局规则。

IE8 时代的兼容片段

当时笔记记录过下面的旧专用透明度写法：

/* 仅说明历史 IE 兼容语法，不用于新页面 */
.legacy-transparent {
  -ms-filter: "alpha(opacity=0)";
}

另一条记录则针对下拉箭头边框使用过：

/* 历史 CSS hack，不是可靠的浏览器能力检测 */
.navbar-fixed-bottom .dropdown .caret {
  border-top: 0;
  border-bottom: 4px dashed;
  border-bottom: 4px solid \9;
  content: "";
}

这两条处理的是不同现象，不能因为都出现在旧 IE 就归为同一根因。这里保留其历史用途，不承诺跨浏览器或跨文档模式适用。

维护遗留系统时，应先确认目标浏览器和文档模式，再用完整最小页面比较布局、点击和焦点；新页面则优先使用当前支持环境里的标准属性。