Мои страницы не отображаются после автоматического обновления до 7.0 - переполнение текста: ellipsis - PullRequest
Новая
       18

Мои страницы не отображаются после автоматического обновления до 7.0 - переполнение текста: ellipsis

1 голос
/ 04 октября 2011

После того, как мой Браузер был сегодня обновлен до Firefox 7.0, на некоторых моих страницах элементы заменяются на ... (elipses), и z-index элементов все испортился.

Я пробовал один и тот же сайт в 3.6.2 и 6.0, и он работает нормально. Как только компьютер обновляется до 7.0 или 8.0 beta, он теперь рендерится дольше, поэтому проблема связана с Firefox.

Я создал образец html-страницы, которая показывает проблему.

В верхнем блоке я ожидал бы, что изображение будет отображаться в кнопке, которую мы делаем в нижнем блоке, но оно заменяется на .... Похоже, переполнение текста: ellipsis; css, но почему это изменится при обновлении?

У кого-нибудь есть предложения? 

<!DOCTYPE html>
<html>
<head>
<title>Infor DataGrid Sample </title>
<style>
   .slick-headerrow-column {
        background: #d5d5d5;
        border-bottom: 0 none;
        height: 100%;
        margin-left: 2px;
        padding-top: 2px;
    }
    .slick-headerrow-column, .slick-cell {
        cursor: default;
        float: left;
        overflow: hidden;
        padding: 3px;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
        z-index: 1;
    }

    .inforFilterButton {
        background:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41Ljg3O4BdAAAB0ElEQVQ4T62USWoCQRiF+wQeQZKt4MKVG68RSFAkS/EG3sBlFCdUslNxIYgLiVEQZwWHheKwMA444EIFPcCLr0gbDWgrpOFRXV1VX/31/r9Lkv770Wg0OofDMXa73fB6vfD7/QgEAkLBYPAm/cyf6A6PdICNfD4f4vE4stksCoUCyuUyKpXKzcpkMohGowiFQiPJ5XIhFoshn8+j0Wig0+mg1+thMBjcpVqthkQiAcnj8YA71Ot19Pt9jMdjLBYLoeVyeZM4dzqdCo7E4+ZyObTbbQFbrVbYbDZCFotFjMl9pZZ2SUxCsVhEt9vFfD7Her3GbrfDfr/HoQBgt9vFu5K4hr4LYKlUEr4xdEbBxZFIBFarFVqtVhEmb1atVn+B9O8UaDQakUwmoVarMZvNboJeBRLEnQmmz0pH5vhFIC0g0GazwWAwCOg14JvTJcYvAgmifzwypVKpLgIJe3oxnQOZTXrIlklhIhilHBWjJFjOvNzKMAKZ5WOErJ+/WVbyzB98F5FRzyazKLcjMJVK3QX8SH2ewUzmV/GnyMBhOBwWHX48LWylKDm+3W4xmUzQbDbRarWGkl6vfzzcEl+8bdLptLhtWPHc4B4R5nQ6H74BwAUeSLCHS8oAAAAASUVORK5CYII=");
        border: medium none;
        height: 16px;
        left: -3px;
        position: relative;
        top: 4px;
        width: 20px;
        z-index: 10;
    }
</style>
 </head>
 <body style="margin:10px;padding:10px">
<div class="ui-state-default slick-headerrow-column c2">
    <button class="inforFilterButton contains" style="top: -3px;" title="Contains" type="button">        </button>
</div>
<br>
<br>
<button class="inforFilterButton contains" style="top: -3px;" title="Contains" type="button"></button>
 </body></html>

1 Ответ

2 голосов
/ 04 октября 2011

Firefox 7 - это первая версия Firefox, в которой реализована text-overflow: ellipsis. Он также реализует то, что сказано в спецификации при поставке Firefox 7, а именно: если указано только одно значение, оно применяется как к начальной, так и к конечной сторонам переполненного контейнера. В вашем случае ваши кнопки расположены так, что они переполняют левый край контейнера, поэтому они переполняются и преобразуются в эллипсы.

Исходя из отзывов об Firefox 7, спецификация с тех пор была изменена на поведение, более совместимое с тем, как IE изначально реализовал text-overflow: ellipsis, но там может произойти больше изменений. Чудеса нестабильных спецификаций, которые написаны, чтобы не соответствовать поведению развернутого браузера ...

...