IE7/8中OnClick过渡与CSS content属性失效问题求助

先来说说你遇到的这两个经典IE兼容性坑，我来给你梳理下不用JavaScript的解决思路：

一、不用JavaScript实现IE7/8的点击过渡效果 #

首先得明确：IE7和IE8完全不支持CSS3的transition属性，没法直接用现代CSS的过渡语法。但我们可以用IE特有的滤镜和CSS checkbox hack来模拟点击触发的状态切换+基础过渡效果，不用写一行JS：

1. 利用隐藏的checkbox模拟点击状态
   把触发元素和一个隐藏的<input type="checkbox">绑定，通过:checked伪类（IE8支持）或相邻选择器（兼容IE7）来控制目标元素的状态。

2. 用IE滤镜实现过渡动画
   IE支持progid:DXImageTransform.Microsoft.Fade()这类滤镜，可实现淡入淡出的过渡效果，配合状态切换触发。

举个简单的示例：

<!-- HTML结构 -->
<input type="checkbox" id="toggle" class="toggle-checkbox">
<label for="toggle" class="toggle-trigger">点击切换内容</label>
<div class="target-element">需要过渡的内容</div>

对应兼容IE7/8的CSS：

/* 隐藏checkbox */
.toggle-checkbox {
  position: absolute;
  left: -9999px;
}

/* 触发元素样式 */
.toggle-trigger {
  cursor: pointer;
}

/* 默认状态 */
.target-element {
  filter: progid:DXImageTransform.Microsoft.Fade(duration=0.5, enabled=false);
  opacity: 0;
  zoom: 1; /* 触发IE的hasLayout，确保滤镜生效 */
}

/* IE8支持的:checked状态触发过渡 */
.toggle-checkbox:checked ~ .target-element {
  filter: progid:DXImageTransform.Microsoft.Fade(duration=0.5, enabled=true);
  opacity: 1;
}

/* IE7降级处理：只能实现即时状态切换，无过渡动画 */
*+html .toggle-checkbox:focus ~ .target-element {
  opacity: 1;
  filter: none;
}

注意：这种方法仅能实现淡入淡出类基础过渡，位移、缩放等复杂效果在IE7/8中不用JS基本无法实现，只能做即时状态切换的降级处理。

二、IE7/8中CSS content属性失效的解决方案 #

你用content添加+/-符号的需求，在IE7/8里有两种替代方案：

方案1：利用IE8的:before/:after兼容 #

IE8支持:before和:after伪元素，但需要满足两个条件：

• 页面必须声明<!DOCTYPE html>（标准模式）
• 目标元素必须触发hasLayout（比如添加zoom:1或width:100%）

示例CSS：

.menu-item:before {
  content: "+";
  zoom: 1; /* 触发hasLayout */
  margin-right: 5px;
}

.menu-item.expanded:before {
  content: "-";
}

⚠️ 这个方法不支持IE7，IE7完全不识别:before/:after伪元素，需要用下面的方案。

方案2：添加额外HTML元素（兼容IE7/8） #

对于IE7，只能通过在HTML中插入额外元素来实现符号切换，不用CSS content：

<!-- 调整后的菜单结构 -->
<li class="menu-item">
  <span class="toggle-sign plus">+</span>
  <span class="toggle-sign minus">-</span>
  菜单标题
  <ul class="submenu">...</ul>
</li>

然后用CSS控制符号的显示隐藏：

/* 默认只显示+号 */
.toggle-sign.minus {
  display: none;
}

/* 结合checkbox hack，点击后切换显示-号 */
.toggle-checkbox:checked ~ .menu-item .toggle-sign.plus {
  display: none;
}
.toggle-checkbox:checked ~ .menu-item .toggle-sign.minus {
  display: inline;
}

这个方法完全兼容IE7/8，不用JS，只是多了少量HTML结构。

最后总结：

• 点击过渡：IE8可通过checkbox hack+IE滤镜实现淡入淡出过渡，IE7不用JS只能做即时状态切换；
• 菜单符号：IE8可用标准:before/:after+content（需触发hasLayout），IE7必须用额外HTML元素配合CSS切换显示。

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