Width e Height não ficam a mesma coisa no IE e no Firefox

body{

background-image: url("images/fundo.jpg");
}

h1 {

font:20px Verdana, Arial, Georgia, sans-serif;
}

#caixa {
margin:200px 80px;
border:7px solid;

/ CSS3 standard /
opacity:0.6;

/Internet Explorer /

filter:alpha(opacity=60);
width: 30%;
height:30%;

/Versões antigas do Firefox/
-moz-opacity:0.6;

/Safari e Google Chrome/

-khtml-opacity: 0.6;

font:14px Verdana, Arial, Georgia, sans-serif;
color:white;
padding:15px;
background:#1D318D;
}

A caixa que eu criei usando div fica de um tamanho x no IE, y no firefox e Z no opera. Por que isso acontece? Tenho que usar algum hack para as propriedades width e height? E pior que sem elas o opacity não funciona no IE...