旧版ie(ie6–ie8)css兼容需绕过限制:用html属性兜底、触发haslayout、弃用高级特性;border-collapse失效时需zoom:1+cellspacing="0";vertical-align无效时用line-height=height;col宽度忽略需设th/td width;td内避免display:block,必要时加zoom:1。

旧版IE(IE6–IE8)对CSS的支持非常有限,很多现代属性根本不可用或行为异常。处理关键不是“强行让它们支持”,而是用它真正能理解的方式实现等效效果——核心思路是:优先用HTML属性兜底、强制触发hasLayout、避免依赖CSS高级特性。
border-collapse与边框控制
IE6–IE7中border-collapse: collapse基本失效,常出现双线或边框丢失。不能只靠CSS解决:
- 必须在
<table>上显式设置<code>zoom: 1或position: relative,触发hasLayout,否则边框渲染错乱 - 保留HTML属性
cellspacing="0",比CSS更可靠;可配合border-spacing: 0作双保险 - 若必须用
border-collapse: separate,可在IE6–IE7条件注释里加:*border-collapse: expression(this.runtimeStyle.borderCollapse='separate') - 避免单独写
vertical-align,它不会生效 - 多行或含块级元素时,IE6–IE7无法用
display: table-cell,需改用绝对定位+负margin模拟居中
vertical-align垂直居中
IE6–IE7中vertical-align: middle对<td>几乎无效,尤其内容含空格或行内元素时:
<ul>
<li>单行文本:直接设<code>td { height: 40px; line-height: 40px; },两者值必须严格相等
列宽控制与colgroup降级
<col>标签在IE6–IE7中宽度完全被忽略,列宽由内容撑开:
- 必须给每一列对应的
<th>或<code><td>显式设置<code>width,推荐用像素值(百分比在IE6中计算不准) -
<col>上写的CSS(如背景、边框)在IE6–IE7中不生效,样式要写到th/td上 - 需要动态列宽?IE6–IE7下放弃
<col>,用JS遍历tr:first-child > th并直接设style.width - 复杂布局尽量不用
div嵌套,改用<span></span>配合white-space: nowrap或float控制 - 若内容需独立样式,优先用内联样式或class控制,而非依赖块级显示行为
表格内块级元素兼容
在<td>里放<code><div style="display: block">,IE6–IE7极易破坏表格流,导致换行异常或单元格撑开:
<ul>
<li>避免在<code>td内使用display: block的元素;如必须用,加zoom: 1触发hasLayout
不复杂但容易忽略











