Problema css chrome x IE

A minha área nem é CSS, aprendi esses dias o básico e estou apenas quebrando um galho aqui.

O meu problema é com o margin-left de um botão, no Chrome ele fica na posição correta mas quando entro pelo Internet Explorer ele recua para esquerda alguns pixels:

No Google Chrome:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.stack.imgur.com/bfKbo.jpg&key=ca498f1eed0c3e6bb51e419af6f3c3e950f1f3b8629173db7df91b5bd4bf61af" alt="bfKbo.jpg" />

No Internet Explorer:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i.stack.imgur.com/aY1wn.jpg&key=66ab7da3901d3adf1a263fc1a45f278be1579fe0547e4840334cb98d07005664" alt="aY1wn.jpg" />

O botão no XHTML:

<div class="titulo">Você está no</div>
<h:panelGroup rendered="#{MBTemplate.indexAtual == '/index_publico.xhtml'}">
<div class="card-container"
onclick="location.reload();
location.href = 'index_privado.xhtml'"
onmouseover="javascript: rotacionarIconeDireita();"
onmouseout="javascript: rotacionarIconeEsquerda();">

<div class="card">
<div class="side">Setor Público</div>
<div class="side back">Ir ao Setor Privado</div>
</div>
<img src="assets/img/mudar_setor.gif" class="icone" id="icone" />
</div>
</h:panelGroup>

<h:panelGroup rendered="#{MBTemplate.indexAtual == '/index_privado.xhtml'}">
<div class="card-container"
onclick="location.reload();
location.href = 'index_publico.xhtml'"
onmouseover="javascript: rotacionarIconeDireita();"
onmouseout="javascript: rotacionarIconeEsquerda();">

<div class="card">
<div class="side">Setor Privado</div>
<div class="side back">Ir ao Setor Público</div>
</div>
<img src="assets/img/mudar_setor.gif" class="icone" id="icone" />
</div>
</h:panelGroup>

CSS:

.titulo {
margin-top: 10px;
margin-left: 61px;
width: 100px;
}

.icone {
margin-left: 107px;
margin-top: 3px;
position: absolute;
margin-top: 3px;
}

.card-container {
cursor: pointer;
height: 50px;
perspective: 600;
position: relative;
width: 200px;
margin-top: 5px;
margin-left: 5px;
}

.card {
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
width: 100%;
}

.card:hover {

transform: rotateY(180deg);
}

.card .side {

backface-visibility: hidden;
border-radius: 6px;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
background: #eaeaed;
color: #0087cc;
line-height: 50px;
text-align: center;
}

.card .back {

background: #eaeaed;
color: #0087cc;
line-height: 50px;
text-align: center;
transform: rotateY(180deg);
}