Question

我正在为客户端使用jPlayer，其中进度条是轨道的标题。它随着轨道的进展而改变颜色。我通过使用一种颜色的标题div来完成此操作，并将进度条绝对定位在其上，标题为另一种颜色。因此，随着进度条的扩展，它会显示新的彩色文本。如果我的描述很糟糕（我确定是这样），你可以在这里查看开发网站：

~~http://sublimio.matthew-ferry.com/sublimio/~~

正如您所看到的，单词标题的进展正常。但是对于多个单词标题，第一个单词显示正常，然后对于后续单词，它们不会显示，直到整个单词结束。

这是一个浏览器呈现问题还是我可以做些什么来解决这个问题？

首先是js：

$('.track').each(
        function()
        {
            var player_id = '#' + $('.jp-jplayer', this).attr('id');
            var audio_id    = '#' + $('.jp-audio', this).attr('id');

            $('.jp-jplayer', this).jPlayer(
                {
                    "cssSelectorAncestor": audio_id,
                    swfPath: "js",
                    supplied: "mp3",
                    wmode:"window"


            }
            );

            $('.song', this).click(
                function(eve)
                {
                    eve.preventDefault();
                    $(this).jPlayer("progress");
                    $('.jp-jplayer').jPlayer("stop");
                    $(player_id).jPlayer(
                        "setMedia", 
                        {
                            mp3: $(this).attr("href")
                        }
                    );

                    $(player_id).jPlayer("play");
                    return false;
                }
            );
        }
    );

现在（简化）HTML：

<ul>
<li class="track">
    <div>
        <div class="jp-controls">
            <span><a class="jp-play song" tabindex="1">play</a></span>
            <span><a class="jp-pause" tabindex="1">pause</a></span>
        </div>
        <div class="title">Title With Multiple Words</div>
        <div class="progress">
            <div class="jp-seek-bar">
                <div class="jp-play-bar">Title With Multiple Words</div>
            </div>
        </div>
    </div>
</li>
...etc...
</ul>

Answer 1

哈，想通了。 0％宽度的进度条将溢出文本包装到多行上。修复是在进度条文本

上使用white-space: nowrap;

在jPlayer进度条上重叠div

1 个答案: