Question

您好我正在做一个图片库，其中悬停缩略图，文字将出现。它在firefox和chrome中是正确的，但在IE11中似乎有问题。

字体及其颜色也不同。

{
"query": {
"bool": {
"must": [
{
"range": {
"metadata.o2r.temporal.begin": {
"from": "2016-01-01T12:35:41.142Z"
}
}
} ,
{
"range": {
"metadata.o2r.temporal.end": {
"to": "2016-12-30T22:00:00.000Z"
}
}
}
]
}
}
}
'

This is the correct one in chrome and firefox

IE 11 - wrong

Answer 1

对于那些提出这个问题的人。 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。所以问题不在于风格，而在于媒体条件

@supports {

<group-rule-body>

}

请参阅此处的DOC＆gt; @media MDN -webkit-transform3d

Answer 2

将变换添加为这样的属性

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

CSS转换不适用于IE11

2 个答案: