jPlayer暂停按钮是内联显示但应该被阻止答案

【问题标题】：jPlayer pause button is display inline but should be blockjPlayer暂停按钮是内联显示但应该被阻止
【发布时间】：2016-02-19 06:28:50
【问题描述】：

我使用jPlayer jquery-ui 主题：http://jplayer.org/latest/demo-07

当我单击播放器上的暂停按钮时，该按钮显示“暂停”标题，而暂停图标未显示。图标应由 jquery-ui 类放置：ui-icon ui-icon-pause

在将其与上面链接中的原始文件进行比较时，我注意到在 a 元素中，“display: none”内联样式被 display: inline 替换。
在原来的它被display: block替换了

<a title="pause" tabindex="2" class="jp-pause ui-icon ui-icon-pause" href="javascript:;" style="display: none;">pause</a>

在 Firebug 中修复此问题，图标呈现正确。

那么为什么在点击暂停按钮时它会在我的播放器中将display: none 替换为display: inline 而不是display: block？

我猜 jPlayer 使用 jquery 的 hide() & show() 来切换按钮。

【问题讨论】：

【解决方案1】：

我刚刚解决了与 Jplayer 相同的问题。您上面的初始评论是 100% 正确的，jquery show() 方法分配了内联样式。这是修复：

错误代码：

this.css.jq.pause.show();

更改为（工作）：

this.css.jq.pause.css("display", "block");

太棒了，希望对你有用

【讨论】：

【解决方案2】：

对我来说，这个问题是由延迟加载样式表引起的。确保在初始化播放器之前已加载皮肤样式。

【讨论】：

【解决方案3】：

起初我尝试在暂停按钮样式中添加display: block;。只有这样，暂停按钮才会在加载时闪烁。所以这不是一个好的解决方案。

用谷歌搜索，我发现解决问题的一种方法是用除法更改锚点，如下所示：

内联版本：

<a href="#" class="jp-play">Play</a>
<a href="#" class="jp-pause">Pause</a>

块版本：

<div class="jp-play">Play</div>
<div class="jp-pause">Pause</div>

然后暂停按钮按预期显示为一个块。

【讨论】：