出现悬停图像文字，Safari中的问题答案

【问题标题】：Hover image text appears , problems in safari出现悬停图像文字，Safari中的问题
【发布时间】：2017-10-21 18:18:14
【问题描述】：

当你将鼠标悬停在缩略图上时，会出现文字。

这在除 safari 之外的所有浏览器中都可以正常工作

谁能帮忙？谢谢！

【问题讨论】：

寻求帮助的问题（“为什么此代码不起作用或如何使该代码起作用？”）必须包括所需的行为、特定问题或错误以及在问题本身中重现它所需的最短代码。没有明确的问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。

【解决方案1】：

您应该将-webkit-transform: translate(-50%,-50%); 添加到.middle，它会起作用。

还有一个建议：（我可能错了）

您正在使用@media (-webkit-transform-3d)，这是一个非标准功能，正如 MDN 所说

非标准此功能是非标准的，不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且行为可能会在未来发生变化。

您应该改用@supports，它具有以下语法

@支持<supports-condition> {

<group-rule-body>

}

附：永远不要链接到外部网站，而是在此处发布您的代码并复制问题。像您这样的问题很容易被否决和关闭

【讨论】：

谢谢，我对堆栈溢出很陌生，所以我不太了解规则
嗨，但是当我在 Safari 中悬停时，图像会有下划线，并且在 IE 中悬停时文本是蓝色的。这是为什么？ Firefox 和 chrome 都没有问题
我也刚刚发现它在 IE 中不起作用....有什么建议可以让它在 IE 中起作用吗？
caniuse.com/#feat=transforms2d 。 //-ms-transform 在 IE10+ 中不存在。 IE8 及更早版本不支持 CSS 转换，IE9 仅使用 -ms-transform，而 IE10 及更高版本仅使用无前缀转换。 // 更多信息请看这里stackoverflow.com/questions/18969621/…
我的规则也有无前缀转换。为什么在 IE 下还是不行？