Este é um problema comum, mas não consigo entender por que isso acontece.

Eu tenho um pai div e dentro desse div eu tenho 3 divs com largura definida para 33% (exatamente, não 33,3%!) Edisplay: inline-block.

No Chrome funciona bem, mas no Mozilla e Opera não (eu não testei no IE ainda). Eu pensei que o problema poderia estar no algoritmo que os navegadores usam para calcular o tamanho dos pixels a partir de porcentagens. Mas quando eu verifiquei as métricas do DOM, descobri que a largura do pai é 864px e a da criança é 285px (isso é correto: 864 * .33 = 285.12). Mas por que não se encaixa no pai? 285 * 3 = 855, 9px menor que a largura dos pais!

Ah, sim, preenchimento, margem e borda para todos os divs definidos como 0 e as métricas do DOM confirmam isso.