img z {display: table-cell} - czy to błąd?

Question

Dec 30, 2009, 01:21 AM

img z {display: table-cell} - czy to błąd?

Chcę użyćdisplay: table-* Właściwości CSS do formatowania listy zdjęć. Sądzę, że poniżej jest to „poprawna” implementacja, ponieważ nie ma w tym nic teoretycznego, ale wyświetla się w Firefoksie i Safari z zakręconym układem tabeli, co widać po obramowaniu. Dla porównania spróbuj zawinąć oba znaczniki img poniżej w a<div></div>; to wyświetla się prawidłowo.

To jest coś specyficznego dla tagu img, być może jak duży on myśli, w porównaniu z tym, ile miejsca zajmuje w rzeczywistości. Czy to błąd?

Poniższy kod jest minimalną prowokacją tego problemu.

<!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>