CSS 转换在 IE11 中不起作用答案

【问题标题】：CSS transform not working in IE11CSS 转换在 IE11 中不起作用
【发布时间】：2017-10-23 01:45:44
【问题描述】：

您好，我正在制作一个图片库，将缩略图悬停在其中，文本将出现。在 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%;
}

This is the correct one in chrome and firefox

IE 11 - wrong

【问题讨论】：

caniuse.com/#search=transform 。一个简单的谷歌搜索会给你答案CSS transform not working IE的可能重复
我删除了 -ms- 前缀，现在有了 transform: translate(-50%, -50%);过渡：0.5s 缓和；但仍然无法在 IE 中工作
如果你仔细阅读。 -ms- prefix 用于 IE9 ， IE10 和更新版本（11 和 edge ）不需要 prefix 。但低于 IE9（ie8,7 等）转换不起作用
我使用的是 IE11。所以我不需要 -ms- 前缀。我从来没有说过任何低于 IE9 的东西。变换：翻译（-50%，-50%）；
寻求帮助的问题（“为什么此代码不起作用或如何使该代码起作用？”）必须包括所需的行为、特定问题或错误以及在问题本身中重现它所需的最短代码。没有明确的问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。

标签： css internet-explorer-11

【解决方案1】：

像这样添加transform作为属性

var element = querySelector(".middle") element.setAttribute("transform","translate("-50, -50")"

【讨论】：

【解决方案2】：

对于那些提出这个问题的人。 OP 在上一个问题中分享了他的网站，所有上述样式都在 @media not all, (-webkit-transform-3d) 内。所以。

正如我在之前对您的一个问题的回答中所说的那样。

@media(-webkit-transform-3d) 表示是否支持 3d 转换，这是 MDN 声明的非标准

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

而且，正如 MDN 中所述，IE 根本不支持它。你应该使用 @supports 。所以问题不在于样式，而在于媒体条件

@支持 {

<group-rule-body>

}

在此处查看文档 > @media MDN -webkit-transform3d

【讨论】：

虽然这可能会回答问题，但链接资源并不适合作为答案的基础，当它来自另一个问题时更糟。一旦该链接消失，该答案和问题的价值也会消失。我建议您等待并发布答案，直到有适当的书面问题。
你好。我在回答的开头解释了操作代码的哪一部分（未在他的问题中发布，但仅在他的网站上）导致了问题以及我的回答所依据的。我这样做是为了确保每个人都明白问题出在哪里，因此我发布了这个解决方案
@MihaiT 感谢您的回答，在这里拥有它绝对有用，因为这是问题的根源。也许你应该写一个新的、更好的问题然后自己回答？