Problema con chrome al convertir una div en tabla

[dardosmania]

Buenas, pues resulta que tengo el siguiente codigo:

HTML

Código HTML:

<div id="imagenes">
        <a href=""><div id="principal"><img src="imagenes/pulseras/principal.png" alt=""></div></a>
        <a href=""><div id="principal"><img src="imagenes/collares/principal.png" alt=""></div></a>
        <a href=""><div id="principal"><img src="imagenes/anillos/principal.png" alt=""></div></a>
        <a href=""><div id="principal"><img src="imagenes/otros/principal.png" alt=""></div></a>
    </div>
 

CSS

Código CSS:

#imagenes{display: table; margin-top:80px; width: 100vw; text-align: center;}
            
    #principal{width: 15vw; display: table-cell;  border: solid black 3px;}
    
    #principal img{width: 100%;}
 

y en firefox e internet explorer se ve de esta manera:
http://www.subeimagen.com/Zrd

Mientras que en chrome se ve asi:
http://www.subeimagen.com/Zrm

No entiendo a que es debido esto ya que creo que las propiedades que uso no son raras ni nada del otro mundo