CSS转换在IE11中不起作用

嗨，我正在做一个图像库，悬停的缩略图，文本将出现。 这在firefox和chrome中是正确的，但在IE11中似乎有问题

而且字体和颜色也不同

.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 100%;
height: 100%;
-webkit-transform: translate(-50%,-50%);
 }

 .text {
 background-color: rgba(183, 191, 183, 0.65);
 color: white;
 font-size: 16px;
 width:100%;
 height:100%;
 padding-top:45%;
 padding-left:2%;
}

---

对于那些提出这个问题的人。OP在前一个问题中分享了他的网站，在那里，所有上述风格都在

@媒体中，而不是全部，（-webkit-transform-3d）

。所以

正如我之前在回答你的一个问题时所说的

@媒体（-webkit-transform-3d）表示是否支持3d转换，这是MDN规定的非标准

此功能是非标准的，不在标准轨道上。不要在面向Web的生产站点上使用它：它不会适用于所有用户。实现之间也可能存在很大的不兼容性，并且行为可能会在将来发生变化。 -webkit-transform-3d是一种非标准布尔CSS媒体功能，其值指示是否支持供应商前缀的CSS 3d转换此媒体功能仅受WebKit和Blink支持。基于标准的替代方法是使用@supports功能查询

而且，正如MDN中所述，它在IE中根本不受支持。您应该使用@supports。因此，问题不在于风格，而在于媒体状况

@支持{

}

---

请参见此处的文档>

将变换添加为如下属性

var元素=查询选择器（“.middle”）
element.setAttribute（“transform”，“translate”（-50，-50”）”

caniuse.com/#search=transform。一个简单的谷歌搜索将为您提供答案，可能与我删除了-ms-前缀，现在有transform:translate（-50%，-50%）的答案重复；过渡：.5s轻松；但如果你仔细阅读，仍然无法在IE9中工作。-ms-前缀表示IE9，IE10和更新版本（11和edge）不需要前缀。但在IE9（ie8,7等）下转换不工作我正在使用IE11。因此我不需要-ms-前缀。我从未在IE9下说过任何内容。转换：翻译（-50%，-50%）；寻求帮助的问题(“为什么这个代码不起作用，或者如何使它起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现该问题所需的最短代码。没有明确问题说明的问题对其他读者没有用处。请参阅：。虽然这可能会回答问题，但链接的资源不能作为答案的基础，如果它来自另一个问题，则更糟糕问题。一旦这个链接消失，这个答案和问题的价值也将消失。我建议你等待并发布答案，直到有一个合适的书面问题。你好。我在回答的开头解释了op代码的哪一部分（没有在他的问题中发布，但只在他的网站上发布）我这样做是为了确保每个人都了解问题所在，因此我发布了这篇文章solution@MihaiT谢谢你的回答，放在这里肯定很有用，因为这是问题的根源。也许你应该写一个新的更好的问题，然后自己回答？