My Pages Do Not Render after auto updating to 7.0 - text-overflow: ellipsis_问答_开发者

My Pages Do Not Render after auto updating to 7.0 - text-overflow: ellipsis

开发者 https://www.devze.com 2023-04-10 03:04 出处：网络

After my Browser was today updated to Firefox 7.0 on some of my pages elements are replaced with ... (elipses) and the z-index of items is all messed up.

相关专题：firefox

After my Browser was today updated to Firefox 7.0 on some of my pages elements are replaced with ... (elipses) and the z-index of items is all messed up.

I tried the same site in 3.6.2 and 6.0 and it is working fine. As soon so the machine updates to 7.0 or 8.0 beta it now longer renders so the problem is related to firefox.

I made a sample html page that shows the problem.

In the upper div i would expect the image to display in the button us it does in the lower div but it is replaced with .... It seems to be the text-overflow: ellipsis; css but why would this change on updating?

Does anyone have a suggestion?

<!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开发者_如何学C+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>

Firefox 7 is the first Firefox release to implement text-overflow: ellipsis. It also implements what the spec said when Firefox 7 shipped, which was that if only one value is provided then it applies to both start and end sides of the overflowing container. In your case your buttons are positioned so they overflow the left edge of the container, so they're overflowing and get converted to ellipses.

Based on feedback from the experience with Firefox 7, the spec has since been changed to a behavior that's more compatible with the way IE originally implemented text-overflow: ellipsis, but there may be more changes happening there. The wonders of unstable specs that are written to not match deployed browser behavior...