Tooltip悬停过渡效果在IE中失效，Chrome正常，请求问题排查

嘿，我来帮你搞定IE浏览器里Tooltip过渡失效的问题！IE对CSS特性的支持和Chrome差异不小，尤其是伪元素过渡、属性前缀、calc()写法这些细节，咱们一步步排查修复：

1. 补全过渡属性并添加IE专属前缀 #

IE10+支持CSS过渡，但需要使用-ms-transition前缀，而且尽量避免用all作为过渡属性（IE对all的兼容表现不稳定），最好明确指定要过渡的属性，比如opacity和transform：

/* 给tooltip的伪元素添加过渡声明 */
[tooltip]:before,
[tooltip]:after {
  transition: opacity 0.3s ease, transform 0.3s ease;
  -ms-transition: opacity 0.3s ease, -ms-transform 0.3s ease; /* IE前缀 */
}

2. 替换calc()写法（兼容IE9及更早版本） #

IE9虽然支持calc()，但在伪元素的位置属性中使用可能出现异常。可以把top: calc(100% - 10px)换成等价的写法，避开calc()：

/* 替换前 */
top: calc(100% - 10px);
/* 替换后 */
top: 100%;
margin-top: -10px;

这样既达到了相同的定位效果，又规避了IE对calc()的兼容问题。

3. 确保hover触发逻辑在IE中生效 #

IE对父元素hover触发伪元素样式的支持没问题，但要给transform加上-ms-前缀，同时保证hover选择器写法正确：

[tooltip]:hover:before,
[tooltip]:hover:after {
  opacity: 1;
  transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%); /* IE专属transform前缀 */
}

4. 完整兼容IE的Tooltip示例代码 #

结合上面的修复点，给你一份可直接复用的兼容代码：

[tooltip] {
  position: relative;
  margin: 100px;
  display: inline-block; /* 确保行内元素也能正确触发hover */
}

/* Tooltip箭头 */
[tooltip]:before {
  width: 16px;
  height: 6px;
  left: 50%;
  top: 100%;
  margin-top: -10px;
  content: '';
  position: absolute;
  z-index: 10;
  box-sizing: border-box;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid #00204e;
  transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  -ms-transition: opacity 0.3s ease, -ms-transform 0.3s ease;
}

/* Tooltip内容框 */
[tooltip]:after {
  content: attr(tooltip); /* 用元素的tooltip属性存储提示内容 */
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 6px;
  background: #00204e;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  transform: translate(-50%, 10%);
  -ms-transform: translate(-50%, 10%);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  -ms-transition: opacity 0.3s ease, -ms-transform 0.3s ease;
  white-space: nowrap;
}

/* hover触发显示 */
[tooltip]:hover:before,
[tooltip]:hover:after {
  opacity: 1;
  transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
}

额外注意点 #

• IE9及更早版本不支持CSS过渡，如果需要兼容这些版本，得用JavaScript模拟过渡效果；
• 确保页面开头的DOCTYPE声明正确（<!DOCTYPE html>），IE在怪异模式下会出现大量样式异常。

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