fixieren ungeklärter Randproblem mit Bildern in html5

In Html5 haben Benutzer auf ein unerwartes Problem gestoßen, bei dem Bilder in den Divila -Definitionen eingeschlossen sind. Dieses Problem wurde auch dann beobachtet, wenn die Höhe und Breite des Bildes und des DIV auf 50px eingestellt sind.

Um diese Anomalie zu lösen, kann das Problem auf das Bild verfolgt werden, das sich wie ein Charakter im Text verhalten, und erstellt einen Speicherplatz, um Zeichen wie "y" oder "g" zu hängen. Die Lösung liegt in der Verwendung der vertikalen CSS-Eigenschaft, um anzuzeigen, dass kein solcher Raum erforderlich ist. Jeder Wert für vertikaler Align wird ausreichen, wobei "mittlere" eine populäre Wahl ist.

implementieren diese Lösung in CSS:

img {
    vertical-align: middle;
}

Durch die Integration dieses Code verlieren die Bilder den unerwünschten unteren Rand, was zu dem erwarteten Verhalten führt. Eine praktische Demonstration finden Sie in dieser aktualisierten JSFIDDLE: http://jsfiddle.net/frpk6/1/.®&&&]