Ajuda na incompatibilidade de browsers

[FreneticFx]

Estou criando um site, mas estou tendo alguns problemas com a parte do css no firefox.
Tenho 3 imagens disposta horizontalmente que, quando eu dou hover dropa um <span> em cada uma delas. No firefox todos os <span> dropam na terceira imagem. Deixo o código a seguir:

HTML:

<div id="column">
        <figure><a href="galeria1.html"><img src="images/galeriahover02.jpg"/></a></figure><span>Retrospectiva 2015</span>
        <figure><a href="galeria2.html"><img src="images/galeriahover01.jpg"/></a></figure><span>Texto2</span>
        <figure><img src="images/galeriahover03.jpg"/></figure><span>Brevemente...</span>
</div>

CSS:

#column{
    margin:10px;
    position:relative;
    width:830px;
    height:190px;
    margin:0 auto;
}
#column figure{
    float: left;
    margin: 0;
    padding:0px 0px 0px 10px;
    border-radius:50px;
}
#column figure img{
    border-radius:5px;
    
    -webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
    border:none;
}
#column figure img:hover{
    border-radius:5px;
    
 	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}
#column span{
    font:bold 16px Arial;
    position:absolute;
    width:260px;
    text-align: center;
    bottom:5px;
    margin:0 0 0 -260px;
    padding:0;
    color:#4b4131;
    
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	opacity: 0;
}
#column figure:hover+span{
    opacity:1;
    bottom:-8px;
}

Estou sem saber o que está dando de errado