Установка innerHTML между пустой строкой и полной строкой в ​​WebKit для плавающих элементов вызывает переполнение - PullRequest
Новая
       6

Установка innerHTML между пустой строкой и полной строкой в ​​WebKit для плавающих элементов вызывает переполнение

2 голосов
/ 15 декабря 2010

Я вижу эту проблему, когда если я переключаю innerHTML плавающего элемента или элемента, вложенного в него, он всплывает за пределы контейнера, как только я переключаюсь обратно с пустой строки на любой текст или разметку. Как ни странно, в приведенном ниже примере, если я удалю text-transform из встроенного CSS, проблема исчезнет.

Это происходит в Chrome 9.0.597.19 и Safari 5.0.3 (сборка WebKit 6533.19.4) в OS X 10.6.5.

Есть идеи, является ли это ошибкой WebKit или чем-то еще? 

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>Safari Float Bug</title>

 <style type="text/css">
        .titlebar {
            background: #eee;
            width: 400px;
            padding: 10px;
            text-transform: uppercase; /* If you remove this line, the right side link no longer floats outside the container. */
        }
 </style>

</head>

<body>
    <p>
        <a href="#" id="clicked">Clicker</a>
    </p>

    <div class="titlebar">

        <span style="float: left;">Title</span>
        <a href="#" id="rightlink" style="float: right;">Right Side Link</a>

        <br style="clear: both;" />
    </div>

    <script type="text/javascript">

        function toggler() {
            var rightlink = document.getElementById("rightlink");
            if (rightlink.innerHTML == "") {
                rightlink.innerHTML = "Right Side Link";
                }
            else {
                rightlink.innerHTML = "";
            }
        }

        document.getElementById("clicked").addEventListener("click", toggler, false);
    </script>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 22 декабря 2010

Конечно, это похоже на ошибку. Я искал bugzilla webkit и не нашел отчета по этому вопросу, поэтому вы можете сообщить об этом. http://webkit.org/quality/reporting.html

Исходя из ответа Скотта: вы можете обойти это, поместив туда пустой тег вместо того, чтобы сделать его пустым. 

function toggler() {
    var rightlink = document.getElementById("rightlink");
  if (rightlink.innerHTML == "<b></b>") {
        rightlink.innerHTML = "Right Side Link";
        }
    else {
      rightlink.innerHTML = "<b></b>";
    }
}
0 голосов
/ 15 декабря 2010

Вы пробовали вручную добавлять слова как "ПРАВОВАЯ СТОРОННАЯ ССЫЛКА" вместо заглавных? Это может быть случай, когда шрифт, который вы отображаете (в Webkit), заставляет ваши заглавные буквы занимать больше места и нарушает границу контейнера. Возможно, вам потребуется установить ограничение на количество символов в ссылке или создать добавление display:block к вашему CSS для тега привязки.

...