Geek asks and answers

Firefox understands "display: table-cell; vertical-align: bottom;" otherwise

I have tableone containing multiple spans. I set the height of these spandynamically and work as a percentage (a kind of histogram). The container of these spanhas a fixed height, and I need it to stay very fixed. I also need them to display from bottom to top, so I installed the container display:table-cell; vertical-align:bottom;. When the total percentage of height exceeds 100%, the content should remain hidden. Chrome, Internet Explorer and Opera (Chrome-like version ...) “hide” the content, but Firefox changes the height of the table / table container ( JSFiddle ).

Installing the container in display:block;solves the problem of "growth growth", but does not allow you to make the inside spanfrom the bottom up.

How can I fix Firefox?

HTML structure:

<hr/>
<table>
    <tbody>
        <tr>
            <td> 
                <span class="holder">
                    <span id="first"></span>
                    <span id="second"></span>
                    <span id="third"></span>
                    <span id="forth"></span>
                </span>
            </td>
            <td> 
                <span class="holder">

                </span>
            </td>
        </tr>
    </tbody>
</table>
<hr/>

CSS ("minified" to save space):

td { width:90px; overflow:hidden; padding:0px; background-color:yellow; }
td span.holder { width:89px; height:100px; border:1px solid black; padding:0px;
    background-color:green; display:table-cell; vertical-align:bottom; }
span.holder span { display:block; border:1px solid black; }
#first { height:30%; background-color:red; }
#second { height:30%; background-color:blue; }
#third { height:20%; background-color:yellow; }
#forth { height:30%; background-color:cyan; }

Edit: in this example, the total percentage is 110% (relative to height holder span). Some content is not displayed and should not be displayed. Chrome, Internet Explorer and Opera hide the part first span, while Firefox extends the parent holderto match the content.

The rendering of the elements in different browsers.

+3
source share
1 answer

vertical-align doesn't really matter here.

You use display:table-cell;to span.holder. Now this leads to the cell table inside the cell table. What comes from there?

, , 'table'/'inline-table', 'table-row' 'table- .

http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes

, - , .

"":

 <!-- (anonymous table) -->
     <!-- (anonymous tbody) -->
         <!-- (anonymous table-row) -->
            <span class="holder"><!-- table-cell -->
                <span id="first"></span>
                <span id="second"></span>
                <span id="third"></span>
                <span id="forth"></span>
            </span>

Fiddle

, ?

"-" , : , "", "" (MIN), . "height" "auto" "table-row" , , MIN. MIN ( ).

http://www.w3.org/TR/CSS21/tables.html#height-layout

height = 100px, MIN = 110px + 8px. , , Firefox , , , MIN. : : " - , , , , "

"" display:block; on .holder

0

More articles:


All Articles