img mit {display: table-cell} - ist es ein Fehler?

Question

Dec 30, 2009, 01:21 AM

img mit {display: table-cell} - ist es ein Fehler?

Ich möchte das benutzendisplay: table-* CSS-Eigenschaften zum Formatieren einer Liste von Fotos. Ich glaube, dass unten eine "korrekte" Implementierung davon ist, in dem es theoretisch nichts falsches gibt, aber es wird in Firefox und Safari mit dem vermasselten Tabellenlayout angezeigt, wie Sie an den Rändern sehen können. Versuchen Sie zum Vergleich, die beiden folgenden img-Tags in a einzuschließen<div></div>; Dies wird korrekt angezeigt.

Dies ist spezifisch für das img-Tag, vielleicht wie groß es denkt, es ist im Vergleich zu dem Platz, den es tatsächlich benötigt. Ist das ein Bug?

Der folgende Code ist eine minimale Provokation dieses Problems.

<!DOCTYPE html>
<html>
    <head>
        <style>
            .photos {display: table; border-collapse: collapse;}
            .photos > div {display: table-row}
            .photos > div > * {
                display: table-cell;
                vertical-align: top;
                border: 1px solid #000;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div class="photos">
            <div>
                <p>Hello World</p>
                <img src="http://www.freeimages.co.uk/galleries/nature/weather/thumbs/frost_oak_leaf_winter_218310.jpg" />
            </div>
            <div>
                <p>Hello World</p>
                <img src="http://www.freeimages.co.uk/galleries/nature/weather/thumbs/frost_oak_leaf_winter_218310.jpg" />
            </div>
        </div>
    </body>
</html>

Zu kommentieren