DIV errada no Firefox e IE.

Fala galera, tudo bom?

Criei uma DIV que, quando passa o mouse, ela aparece dentro de uma imagem. No Chrome, Opera e outros deu tudo certo, mas no Firefox e Internet Explorer, essa DIV aparece totalmente fora.

CSS:

.imagem{
	width:auto;
	height:auto;
	padding: 4px;
	background-color: #111111;
	border: 1px solid #707070;
	border: 1px solid #484848;
	margin-right:4px;
	margin-left:4px;
	margin-bottom:3%;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	display:inline-block;
	position:relative;
}

.size{
	width:250px;
	height:20px;
	background-color:#111111;
	margin-top:-20px;
	display:none;
	color:#FFF;
	text-align:center;
	position:absolute;
	padding-top:2px;
}

.conteudo a:hover + .size{

	display:inline-block;
}

HTML:

<div class='imagem'>
<a href='#' target='blank'><img src='wp/imagem.jpg'/></a>
<div class='size'>500 x 500</div>
</div>

Alguém sabe o que poderia ser?