jQuery-Marquee работает только в Firefox


Я использую jQuery-Marquee для имитации эффекта marquee для "последнего твита" div. Но он работает только в Firefox. Он выводится правильно в Chrome, но шатер не прокручивается по какой-то причине. Кто-нибудь может помочь мне понять, что происходит?

HTML (это то, что выводит)

<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 (в нижнем колонтитуле фактического сайта)

<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 2

1 ответ:

Похоже, что вы не можете применить плагин marquee, который вы используете, к элементам, которые являются display: inline;.

Попробуйте удалить display: inline; на элементе <p class="tweet-text"> или изменить его на display: block;. Возможно, вам придется настроить некоторые другие CSS, чтобы учесть эту оговорку, но это должно исправить ее.