Проблема рендеринга Chrome span - PullRequest
Новая
       0

Проблема рендеринга Chrome span

2 голосов
/ 10 апреля 2011

У меня запущен тикер новостей, который корректно отображается в FF, но не во всех версиях Chrome: 

<div id="a" style="position:fixed; bottom:50px; height:30px;">
  <span id="b" style="display:inline; position:absolute;">blah blah text one two three.</span>
</div>

при загрузке документа я вызываю функцию jquery для установки css, (установите LEFT из #bчтобы переместиться справа налево), пока текст завершен за пределами экрана, я сбрасываю ЛЕВУЮ из #b в screen.width.

, но текст #b будет вырезан до 1-2 слов, (FF показывает правильно, как новостную ленту) при некотором расследовании я обнаружил, что в chrome текст разбивается на несколько строк и никогда не меняется обратно.

Мне было интересно, как я могу избежать этого?или это ошибка Chrome

1 Ответ

0 голосов
/ 10 апреля 2011

Я проверил это в Opera, и текст также разбит на несколько строк.Так что, вероятно, это не только проблема Chrome.Я исправил многострочную проблему, удалив position: absolute.Требуется ли эта позиция для анимации?

РЕДАКТИРОВАТЬ: После проверки еще раз, это не проблема позиции.Эта проблема возникает из-за того, что a не имеет ширины, а браузер пытается уменьшить ширину b до минимума.Если вы добавите атрибут ширины, это должно решить проблему.Лучшее сработает более чем на 100%, поэтому справа есть место для скрытого b.Вот и пример этого решения с шириной 200% - оно работает на Opera, FF и Chrome. 

<html>
<body>
<script language="javascript">
var pos = innerWidth;
function setTimer() {
    b = document.getElementById('b')
    pos = pos - 10;
    if(pos <= 0)
        pos = innerWidth;
    b.style.left = pos+"px";
    setTimeout(setTimer,100);
}

</script>
<button onclick="setTimer()">start</button>
<div id="a" style="position:fixed; bottom:50px; height:30px; background-color: gold; width:200%">
  <span id="b" style="position:absolute; background-color: teal">blah blah text one two three.</span>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...