Margin-top в разных браузерах отображается по-разному

Собственно, есть блок:

<div style="position: relative; z-index:5; width: 100%; text-align:center; margin-top:-450px;">
</div>

Почему-то в мазиле отображается нормально, а в хроме сильно уходит вверх, будто margin-top не 450, на целых 600.

Если поставить значение 200, то в хроме отображается нормальнно, а в мазиле сильно уезжает вниз...

Может, можно как-то для хрома одтдельно задать значение?

Немного больше кода, чтобы была понятней ситуация.

<table width="600px" height="500px" style="margin: auto;">
<tr>
    <td width="100%">
    <center><h3>ТЕКСТ</h3></center>
</td>
</tr>

<tr>
    <td width="100%">

<div style="position: relative; z-index:5; width: 100%; text-align:center; margin-top:-200px;">
<img  src="/images/front-l.png" alt="" style="position: absolute; z-index:5; width: 600px; height: 399px; margin-top: 0px; left: 0px; pointer-events: none;" />

<iframe  style="position: absolute; z-index:4; width: 562px; height: 321px; margin-top: 18px; left: 18px;"  src="//www.youtube.com/embed/foGBFooM6eU?wmode=opaque" frameborder="0"  allowfullscreen></iframe>

</div>

</td>
</tr>
</table>

Решил проблему так, может, кому-то пригодится:

<td width="100%">
<style> 
#blok5 {
  position: relative; 
  top:-200px; 
  z-index:5; 
  width: 100%; 
  text-align:center;
}

#blok5, x:-moz-any-link {
  position: relative; 
  top:-450px; 
  z-index:5; 
  width: 100%; 
  text-align:center;
}
</style>
<div id="blok5" class="blok5">
<img  src="/images/front-l.png" alt="" style="position: absolute; z-index:5; width: 600px; height: 399px; margin-top: 0px; left: 0px; pointer-events: none;" />

<iframe  style="position: absolute; z-index:4; width: 562px; height: 321px; margin-top: 18px; left: 18px;"  src="//www.youtube.com/embed/foGBFooM6eU?wmode=opaque" frameborder="0"  allowfullscreen></iframe>

</div>
</td>