jQuery 移动 : data-icon causing text value to display above icon

Question

我从来没有在这里发布过问题，因为我通常可以找到答案，但这个问题我却忽略了。

拥有 jQuery mobile 版本 1.3.2 以及关联的 css 文件。

由于图片胜过一百万个字，所以只需看看正在发生的事情即可。

http://s11.postimg.org/hojpomu4z/Image_8_20_13_at_3_52_PM.jpg

看出问题了吗？ 显然，数据图标属性中的文本显示在按钮上方。

我的个人 Web Inspector 和 Firebug 都无法识别那里有任何东西。

我已经在 chrome、firefox、safari 和 ie 9/10 上尝试过。 Mac 和 PC 均可。没什么。

我已经尝试过过去 5 个版本的 jQuery mobile。还尝试过 jQuery 1.9 和 1.10

使用托管按钮图像和我自己的按钮图像。

我已经将页面精简到只剩下带有按钮的 jQuery 定义，但它仍然执行此操作。甚至尝试了 CDN 上托管的 jQuery 文件。

除了屏幕截图中的内容之外，实际上没有其他代码可显示，因为这就是所有正在发生的事情。 (忽略new_round类)，它是空白的。

我只是希望其他人也遇到过这个问题并且能够提供解决方案。

(这不是我第一次使用 jQuery mobile，但这是我第一次看到这种情况发生。)

Answer 1

我今天遇到了确切的问题，幸运的是找到了解决方案。

我在名为 Customizr 的 WordPress 主题中使用 JQuery Mobile。当我添加这样的链接时:

<a data-icon="gear" data-role="button" href="#">Hey</a>

按照采购订单所述，我将在“嘿”上方看到一个带有“齿轮”的按钮。

这是因为隐藏在主题深处的 CSS 规则:

[data-icon]:before {
    content: attr(data-icon);
}

要解决此问题，只需使用以下内容覆盖此规则:

[data-icon]:before {
    content: "";
}

您可能需要在 CSS 中查找此规则。希望对您有所帮助。