工具提示悬停上的转换不适用于IE，在Google Chrome中运行良好

Question

我已经检查过有关不在IE上工作的转换的相关帖子，但我无法弄清楚这个有什么问题。

＆＃13;

＆＃13;

[tooltip] {
	position: relative;
  margin: 100px;
}

/* Arrow */
[tooltip]:before {
	width: 16px;
	height: 6px;
	left: 50%;
	margin-top: 2px;
	top: calc(100% - 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%);
	opacity: 0;
	-webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	pointer-events: none;
}

/* Text */
[tooltip]:after {
	transform: translate(-50%, 0%);
	left: 50%;
	margin-top: 11px;
	top: calc(100% - 10px);
	font-weight: normal;
	text-shadow: none;
	background: #00204e;
	border-radius: 4px;
	color: #fff;
	content: attr(tooltip);
	padding: 10px;
	position: absolute;
	white-space: normal;
	width: 150px;
	width: max-content;
	font-size: 10px;
	font-family: 'Helvetica Neue';
	line-height: normal;
	max-width: 150px;
	text-align: left;
	height: auto;
	display: inline-block;
	opacity: 0;
	-webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	pointer-events: none;
	z-index: 10;
}

[tooltip]:hover {
}

[tooltip]:hover::before,
[tooltip]:hover::after {
	opacity: 1;
	pointer-events: auto;
	top: calc(100% + 0px);
	overflow: visible;
    z-index: 10;
}

＆＃13;

<span tooltip="I am a tooltip.">Tooltip</span>

＆＃13;

＆＃13;

＆＃13;

当您将鼠标悬停在工具提示上时，过渡效果在Google Chrome中完全正常，但在Internet Explorer中则无效。我甚至尝试添加一个空的悬停CSS，因为我搜索了IE的类似的东西，但它也没有工作。对此有何帮助？

Answer 1

我认为您无需使用calc。

＆＃13;

＆＃13;

[tooltip] {
	position: relative;
  margin: 100px;
}

/* Arrow */
[tooltip]:before {
	width: 16px;
	height: 6px;
	left: 50%;
	margin-top: 2px;
	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%);
	opacity: 0;
	-webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	pointer-events: none;
}

/* Text */
[tooltip]:after {
	transform: translate(-50%, 0%);
	left: 50%;
	margin-top: 11px;
	top: 10px;
	font-weight: normal;
	text-shadow: none;
	background: #00204e;
	border-radius: 4px;
	color: #fff;
	content: attr(tooltip);
	padding: 10px;
	position: absolute;
	white-space: normal;
	width: 150px;
	width: max-content;
	font-size: 10px;
	font-family: 'Helvetica Neue';
	line-height: normal;
	max-width: 150px;
	text-align: left;
	height: auto;
	display: inline-block;
	opacity: 0;
	-webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	pointer-events: none;
	z-index: 10;
}

[tooltip]:hover {
}

[tooltip]:hover::before,
[tooltip]:hover::after {
	opacity: 1;
	pointer-events: auto;
	top: 20px;
	overflow: visible;
    z-index: 10;
}

＆＃13;

<span tooltip="I am a tooltip.">Tooltip</span>

＆＃13;

＆＃13;

＆＃13;