Q:

Bootstrap columns display different in Firefox

I am having a issue with Bootstrap in Firefox. My columns are set correctly in Chrome, Opera and Safari, but not in Firefox. 
I created ten boxes distributed in two rows. Five in each row. These boxes has classes .col-sm-2 and .col-xs-10, besides a class called .categoria.
<div class="container categorias">
        <div class="row">
            <div class="col-xs-offset-1">
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="img/corneta.png" alt="corneta">
                    <p>Novidades</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="img/contribua.png" alt="contribua">
                    <p>Contribua</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="img/nota.png" alt="nota">
                    <p>Sua Nota é Um Show</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="img/parceiros.png" alt="parceiros">
                    <p>Parceiros</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="img/projetos.png" alt="projetos">
                    <p>Projetos</p>
                </div>

            </div>
        </div>
        <div class="row">
            <div class="col-xs-offset-1">
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="img/historico.png" alt="historico">
                    <p>Histórico</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="img/objetivos.png" alt="objetivos">
                    <p>Objetivo, Missão, <br> Valores</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="img/relatorios.png" alt="balancetes">
                    <p>Balancetes</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="img/diretoria.png" alt="diretoria">
                    <p>Diretoria</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="img/estatuto.png" alt="estatuto">
                    <p>Estatuto</p>
                </div>
            </div>
        </div>

    </div>

In Chrome, Opera and Safari, they appear correctly:
Screenshoot from Chrome
But in Firefox, it is completely irregular.
Screeshoot from Firefox
Note that I am using JQuery to set these boxes max-height so they will never have the height bigger than the width. I using the following code:
$(document).ready( function(){

    var columnWidth = $('.categoria').innerWidth();

    $('.categoria').css('max-height', columnWidth);

});

And here is the css:
.categoria{
    transition: background-color 0.5s linear, box-shadow 0.5s linear;
    background-color: #76C6C5;
    height: 140px;
    margin-left: 1%;
    margin-right:1%;
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
    display: table;
}

.categoria img{
    padding-top: 15%;
    height: 50%;
    display:block;
    margin-left: auto;
    margin-right: auto;
}

.categoria.col-sm-2 > p{
    font-size: 14px;
    padding-top: 10px;    
}

@media(max-width: 768px){
    .categoria{
        vertical-align: middle;
        height: 8em;
    }

    .categoria.col-sm-2 > p{
        font-size: 1.5em;
        display: table-cell;
        vertical-align: middle;
    }

    .categoria img{
        display: none;
    }

}
.col-xs-offset-1{
    padding-left: 15px;
}

To be honest, I am not even sure if it is a problem with Bootstrap. But I don't know what else could be.

A:

Ok so you should change display to table only when you don't want to show image :) that seems to resolve issue with uneven heights 
CSS:
.categoria{
    transition: background-color 0.5s linear, box-shadow 0.5s linear;
    background-color: #76C6C5;
    height: 140px;
    margin-left: 1%;
    margin-right:1%;
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
    display: block;
}

.categoria img{
    padding-top: 15%;
    height: 50%;
    display:block;
    margin-left: auto;
    margin-right: auto;
}

.categoria.col-sm-2 > p{
    font-size: 14px;
    padding-top: 10px;    
}

@media(max-width: 768px){
    .categoria{
        vertical-align: middle;
        height: 8em;
        display:table;
    }

    .categoria.col-sm-2 > p{
        font-size: 1.5em;
        display: table-cell;
        vertical-align: middle;
    }

    .categoria img{
        display: none;
    }

}
.col-xs-offset-1{
    padding-left: 15px;
}

HTML : 
<div class="container categorias">
        <div class="row">
            <div class="col-xs-offset-1">
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="corneta">
                    <p>Novidades</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="contribua">
                    <p>Contribua</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="nota">
                    <p>Sua Nota é Um Show</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="parceiros">
                    <p>Parceiros</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="projetos">
                    <p>Projetos</p>
                </div>

            </div>
        </div>
        <div class="row">
            <div class="col-xs-offset-1">
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="historico">
                    <p>Histórico</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="objetivos">
                    <p>Objetivo, Missão, <br> Valores</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="balancetes">
                    <p>Balancetes</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="diretoria">
                    <p>Diretoria</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="estatuto">
                    <p>Estatuto</p>
                </div>
            </div>
        </div>

    </div>

Fiddle

