jquery - jQuery mobile：数据图标导致文本值显示在图标上方

Question

我从来没有在这里发布过问题，因为我通常可以找到答案，但是这个问题已经让我逃脱了。

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

既然图片值一百万字，那就看看发生了什么。

看到问题了吗？显然 data-icon 属性中的文本显示在按钮上方。

我的 Personal Web Inspector 和 Firebug 都无法识别出任何东西。

我已经在 chrome、firefox、safari 和 9/10 上尝试过。mac和pc都可以。没有什么。

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

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

我已经将页面剥离到只有带有按钮的 jQuery 定义的地步，它仍然这样做。甚至尝试了托管在 CDN 上的 jQuery 文件。

除了屏幕截图中的内容之外，真的没有其他代码可以显示，因为这就是发生的一切。（忽略 new_round 的类），它是空白的。

我只是希望其他人遇到了这个问题并且可以提供解决方案。

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

score 0 · Accepted Answer

如果您只需要没有文本的图标，则需要将其添加为链接中的属性：

data-iconpos="notext"

例如：

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>

score 0 · Accepted Answer

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

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

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

如 PO 所述，我将在“嘿”上方获得一个带有“齿轮”的按钮。

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

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

要解决此问题，只需使用以下命令覆盖此规则：

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

您可能需要在 CSS 中查找此规则。希望能帮助到你。

2 回答 2