一些 CSS3 动画在 eBay 中不起作用说明 [关闭]答案

【问题标题】：Some CSS3 Animations not working in eBay Description [closed]一些 CSS3 动画在 eBay 中不起作用说明 [关闭]
【发布时间】：2015-09-23 22:09:22
【问题描述】：

所以 eBay 列表非常有限，但我没有看到任何表明 CSS3 无法工作的东西...我已经能够使用 @font-face 和其他一些 CSS 鼠标悬停在动画上，例如稍微缩小图像等，他们都工作正常。我还能够在另一个列表中添加一个旋转动画，当您将鼠标悬停在图像上时会发生这种动画，这应该再次表明任何 CSS 都可以工作。

以前在 CSS 中看到的任何错误 id 都与 eBay 解析代码的方式有关，如果有任何空格，它偶尔会抛出 CSS 解析错误，但一旦这些被清除，一切运行正常，除了这次动画仍然不起作用。

当您将鼠标悬停在以下演示列表中的两部手机上时，它们应该会倾斜，但没有任何反应。任何人都可以调试这可能的原因吗？

这是一个测试 eBay 列表 http://www.ebay.co.uk/itm/NEW-Beats-by-Dr-Dre-Solo2-On-Ear-Headband-Headphones-Test-Listing-/301742453131

这是一个自托管版本，它应该适用于 OS X 和 Windows 上的所有主要浏览器。 http://deecies.com/ip6test.html

【问题讨论】：

在 CSS 的第 162 行（:hover 规则），在左括号 { 之前有一个换行符。我认为这可能与您的问题有关？
谢谢大卫，你肯定在那里抓到了一些东西！我删除了它，现在它几乎工作了。在 Safari 中，当我将鼠标悬停在图像上时，由于某种原因消失了。 Firefox 和 Chrome 的图像工作正常。最后，Firefox 和 IE 的后备方案是使用大量 div 来处理缺少的外部形状，如果您在 IE 或 Firefox 中加载上述链接但在 eBay 中则不行，则此方法有效，因此在某处可能存在一些错误的语法，eBay 似乎成为最严格的浏览器！
您在 eBay 页面的嵌入式部分中的两部手机在 Firefox 和 Chrome (Mac OS X 10.11) 上对我来说都是倾斜的。编辑：没有看到上面的评论。
@DannyShepherd 嗯，这确实很奇怪，左边的图像现在在 Safari 中为我工作，只是右边的图像导致了问题。我会尝试调试更多。
这条规则：.iphone6sfloatright:hover, .iphone6sfloatright:active 在供应商前缀中存在语法错误，我认为这是右侧图像的问题... 看到 Chrome 和 FF 使用的前缀没有错误。在 Safari 开发工具中更正语法为我修复了它

标签： html css animation ebay-design-templates

【解决方案1】：

Doctype 是 CSS3 的某些部分无法在 eBay 描述上运行的原因。

iframe 上的 Doctype（这是 eBay 抛出您的描述的地方）未定义，因此它可以默认为 html 4。

在构建模板时要记住以下几点：

在 eBay 上存在首次加载与缓存加载的已知问题。如果您在非缓存隐身窗口中查看您的列表，您将看到 eBay 不会将您的描述放入 iFrame 并且 Doctype 被定义为 HTML5。但是，如果您重新加载页面，您将返回到您的 iframe HTML 4 文档类型。

【讨论】：

我一直认为不包含文档类型会使大多数浏览器恢复到 Quirks 模式，而不是 HTML4。还是我错过了什么？
嗨，Isaac，感谢您提供的宝贵信息。我知道 eBay 在第一个视图中将其放入 div 中，然后在第二个视图中放入 iframe 进行缓存，我发现导致此错误的语法错误。我开始希望我没有使用电子邮件模板来构建，因为很多代码非常混乱，很难找到浏览器可以原谅但嵌入到 eBay 中的小语法。是否可以在描述中使用 doctype 定义为 HTML5，还是 iframe 总是会忽略它？
是的，您可以使用 iframe。在 iframe 中，您可以将 doctype 定义为您想要的任何内容，但是为了在 eBay 上生成 iframe，您需要使用 document.write 之类的东西，并使用将单词 iframe 与变量分开。