jQuery-Marquee仅适用于Firefox

问题描述

我正在使用模拟最新推文的字幕效果DIV。但它只适用于Firefox。它在Chrome中正确输出，但由于某种原因，选框不会滚动。有人可以帮我弄清楚发生了什么吗？

I'm using jQuery-Marquee to simulate a marquee effect for a 'latest tweet' div. But it only works in Firefox. It outputs correctly in Chrome but the marquee doesn't scroll for some reason. Can someone help me figure out what's going on?

HTML（这就是输出）

HTML (this is what outputs)

<div class="latest-tweets">
  <ul class="sf-js-enabled">
    <li>
      <p class="tweet-text">
        <div style="width: 100000px; margin-left: 0px;" class="js-marquee-wrapper">
          <div class="js-marquee" style="margin-right: 0px; float: left;">RT <a class="twitter-screen-name" href="https://twitter.com/Kollaboration" target="_blank">@Kollaboration</a>: Angry Asian American, a new show from <a class="twitter-screen-name" href="https://twitter.com/angryasianman" target="_blank">@angryasianman</a> <a class="twitter-screen-name" href="https://twitter.com/jennyyangtv" target="_blank">@jennyyangtv</a> on <a class="twitter-screen-name" href="https://twitter.com/ISATVofficial" target="_blank">@ISATVofficial</a> Watch the first angry ep. here: http…<a href="http://twitter.com/ISATVofficial/status/447119023319162881" target="_blank">- 1 day ago</a>
          </div>
        </div>
      </p>
    </li>
  </ul>
</div>

JavaScript（在实际网站的页脚中）

JavaScript (in the footer of the actual site)

<script src="jquery.marquee.min.js"></script>
<script>
  jQuery(function () {
    jQuery('.tweet-text').marquee({
      pauseOnHover: true,
      duration: 8000
    });
  });
</script>

CSS

.latest-tweets {
  color: #ddd;
  float: left;
  line-height: 42px;
}
.latest-tweets ul {
  height: 42px;
  max-width: 550px !important;
  overflow: hidden;
  text-align: left;
}
.latest-tweets li {
  cursor: pointer;
  height: 42px;
}
.latest-tweets p {
  display: inline;
  margin-bottom: 0;
  white-space: nowrap;
}
.tweet-text {
  width: 550px;
  overflow: hidden;
}
.tweet-details {
  margin-left: 10px;
}
.tweet-details a {
  text-transform: none !important;
}

推荐答案

看起来你好像是无法将您正在使用的 marquee 插件应用于 display：inline; 。

It looks like you're not able to apply the marquee plugin you're using to elements that are display: inline;.

尝试删除上的显示：inline; < p class =tweet-text> ; 元素或将其更改为 display：block; 。你可能不得不调整一些其他的CSS来解决这个警告，但这应该解决它。

Try removing the display: inline; on the <p class="tweet-text"> element or changing it to display: block;. You may have to adjust some other CSS to account for this caveat, but that should fix it.

这篇关于jQuery-Marquee仅适用于Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！