jQuery-Marquee only working in Firefox

问题

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 (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 (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;
}

回答1:

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

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.

来源：https://stackoverflow.com/questions/22582726/jquery-marquee-only-working-in-firefox

标签

javascript

jquery

wordpress

marquee