Olá, Matheus!
Eu testei o seu código no Google Chrome e as três caixas ficaram iguais. No entanto, ao testar no Firefox as três ficaram com a mesma largura mas com alturas diferentes. Você pode ver isso inspecionando cada elemento da página nos dois navegadores, teclando Ctrl + Shift + C e passando o mouse sobre o elemento que você quer ver as propriedades.
Meu palpite em relação à essa diferença: nós definimos uma largura para as caixas mas não definimos para a altura, sendo assim, a medida que adicionamos elementos dentro das caixas, a altura da caixa vai se ajustando ao conteúdo dentro dela.
Bom, mas se é o mesmo código, por que aparece diferente nos dois navegadores? Por que não definimos uma fonte única no nosso projeto, o navegador vai renderizar a página utilizando a fonte padrão do próprio navegador, no caso do Google Chrome é o "Times New Roman", que aplicada aos nossos elementos de texto, faz com que todos tenham a mesma altura, e assim as três caixam fiquem com alturas iguais. Já no caso do Mozilla, um elemento de texto que estava em uma única linha acaba "vazando" para a próxima, alterando a altura do elemento e consequentemente da caixa toda, uma vez que o Mozilla está utilizando uma fonte diferente.
Penso que há 3 maneiras de resolver:
Definir uma altura fixa para as três caixas, que não vai deixar os elementos de texto alinhados mas vai alinhar as caixas, como por exemplo:
.produtos li {
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
margin: 0 1.0%;
padding: 30px 20px;
box-sizing: border-box;
border: 2px solid #000000;
border-radius: 10px;
height: 450px;
}
Alterar a fonte dos produtos para a "Times New Roman", já que vimos que dá certo no Google Chrome:
.produtos {
width: 940px;
margin: 0 auto;
padding: 50px 0;
font-family: "Times New Roman"
}
Alterar o tamanho dos textos nos produtos, de modo que os textos correspondentes das três caixas "caibam" na mesma quantidade de linhas.
