Элементы <marquee> располагаются вертикально в САФАРИ

349
14 июля 2017, 04:17

На сайте есть бегущая строка , абсолютно везде элементы бегут в строчку, но в SAFARI, либо в еще некоторых браузерах, в частности в адаптиве (при отображении на телефоне) - Список элементов "едет" стройным столбиком - В этом и есть проблема.

Код строки:

<marquee style="height: 17px">
              <div class="lenta-rbk">
<div style="direction: ltr; text-align: left ! important">
    <table cellpadding="0" cellspacing="0" class="moduletable">
            <tbody><tr>
            <td></td>
        </tr>
            <tr>
        <td>
            <ul class="newsfeed">
                            <li>
                                    <a href="http://www.rbc.ru/business/11/07/2017/5964d46d9a79474268a5e0ef" target="_blank">
                    Суд за турбины: как Siemens пытается избежать санкций за поставки в Крым</a>
                                </li>
                                <li>
                                    <a href="http://www.rbc.ru/business/11/07/2017/5965166b9a7947e3600c9b29" target="_blank">
                    «Ростех» получит долю в крупнейшем золотодобытчике России</a>
                                </li>
                                <li>
                                    <a href="http://www.rbc.ru/rbcfreenews/596513899a7947deccc6e130" target="_blank">
                    Семья основателя «Черкизово» выкупит 21% компании у Prosperity Capital</a>
                                </li>
                                <li>
                                    <a href="http://www.rbc.ru/business/11/07/2017/5964ace49a79472faf913d81" target="_blank">
                    Производители меди в России решили увеличить добычу в надежде на дефицит</a>
                                </li>
                                <li>
                                    <a href="http://www.rbc.ru/rbcfreenews/5964f1209a79474b17576819" target="_blank">
                    Экс-менеджеры «Башнефти» оспорили решение суда о премиях в компании</a>
                                </li>
                                <li>
                                    <a href="http://www.rbc.ru/rbcfreenews/5964e80b9a794754b5cda4be" target="_blank">
                    ЦБ выявил признаки инсайдерской торговли акциями «Нижнекамскнефтехима»</a>
                                </li>
                                <li>
                                    <a href="http://www.rbc.ru/business/11/07/2017/5964eab39a79477b95435daa" target="_blank">
                    ФСБ пришла с обысками в офис компании «Т Плюс»</a>
                                </li>
                                <li>
                                    <a href="http://www.rbc.ru/business/11/07/2017/5964c8819a794733879aaeae" target="_blank">
                    Siemens подал в суд из-за поставки его турбин в Крым</a>
                                </li>
                                <li>
                                    <a href="http://www.rbc.ru/rbcfreenews/5964a66a9a7947d3a7376eae" target="_blank">
                    Германия назвала поставку турбин в Крым «ударом по инвестициям» в Россию</a>
                                </li>
                                <li>
                                    <a href="http://www.rbc.ru/rbcfreenews/5964a5f59a7947cf2989eaf3" target="_blank">
                    ФАС прекратит принимать жалобы по тендерам на капремонт от физлиц</a>
                                </li>
                            </ul>
        </td>
        </tr>
    </tbody></table>
</div>
</div>
          </marquee>

Код стилей:

#banner_g2 marquee{position:absolute;bottom:15px;height:17px !important}
Answer 1

Надо задать отображение списка с одну строчку:

li {
  display: inline-block;
}

Чтобы работало и в Хроме, и в Сафари, надо сделать так:

ul {
  display: flex;
}
li {
  display: inline-block;
  white-space: nowrap;
}

См. сниппет.

#banner_g2 { 
  width: 320px; 
  position: absolute; 
  bottom: 15px; 
  height: 18px; 
} 
 
ul { 
  margin: 0; 
  padding: 0; 
  display: flex; 
} 
 
li { 
  display: inline-block; 
  margin: 0 15px; 
  white-space: nowrap; 
}
<div id="banner_g2"> 
  <marquee> 
    <ul class="newsfeed"> 
      <li> 
        <a href="http://www.rbc.ru/business/11/07/2017/5964d46d9a79474268a5e0ef" target="_blank"> 
                    Суд за турбины: как Siemens пытается избежать санкций за поставки в Крым</a> 
      </li> 
      <li> 
        <a href="http://www.rbc.ru/business/11/07/2017/5965166b9a7947e3600c9b29" target="_blank"> 
                    «Ростех» получит долю в крупнейшем золотодобытчике России</a> 
      </li> 
      <li> 
        <a href="http://www.rbc.ru/rbcfreenews/596513899a7947deccc6e130" target="_blank"> 
                    Семья основателя «Черкизово» выкупит 21% компании у Prosperity Capital</a> 
      </li> 
      <li> 
        <a href="http://www.rbc.ru/business/11/07/2017/5964ace49a79472faf913d81" target="_blank"> 
                    Производители меди в России решили увеличить добычу в надежде на дефицит</a> 
      </li> 
      <li> 
        <a href="http://www.rbc.ru/rbcfreenews/5964f1209a79474b17576819" target="_blank"> 
                    Экс-менеджеры «Башнефти» оспорили решение суда о премиях в компании</a> 
      </li> 
      <li> 
        <a href="http://www.rbc.ru/rbcfreenews/5964e80b9a794754b5cda4be" target="_blank"> 
                    ЦБ выявил признаки инсайдерской торговли акциями «Нижнекамскнефтехима»</a> 
      </li> 
      <li> 
        <a href="http://www.rbc.ru/business/11/07/2017/5964eab39a79477b95435daa" target="_blank"> 
                    ФСБ пришла с обысками в офис компании «Т Плюс»</a> 
      </li> 
      <li> 
        <a href="http://www.rbc.ru/business/11/07/2017/5964c8819a794733879aaeae" target="_blank"> 
                    Siemens подал в суд из-за поставки его турбин в Крым</a> 
      </li> 
      <li> 
        <a href="http://www.rbc.ru/rbcfreenews/5964a66a9a7947d3a7376eae" target="_blank"> 
                    Германия назвала поставку турбин в Крым «ударом по инвестициям» в Россию</a> 
      </li> 
      <li> 
        <a href="http://www.rbc.ru/rbcfreenews/5964a5f59a7947cf2989eaf3" target="_blank"> 
                    ФАС прекратит принимать жалобы по тендерам на капремонт от физлиц</a> 
      </li> 
    </ul> 
  </marquee> 
</div>

READ ALSO
Не работают @media правила ни Chrome, ни в Firefox

Не работают @media правила ни Chrome, ни в Firefox

Не работают медиа правилаНе отображаются даже в DevTools ни в одном из браузеров

315
Как вызвать процедуру по условию?

Как вызвать процедуру по условию?

Как правильно вызвать процедуру если найдена запись в таблице?

319
java web кодировка

java web кодировка

Создал веб приложение на сервлетах с сервером tomcat и столкнулся с проблемой кодировки

239