Solucionar problema CSS de position relative y absolute en Firefox 4

Estudiando lo nuevo de CSS3 decidí bajarme el nuevo Firefox 4, que incluye soporte de HTML5, CSS3, animaciones cómo las de webkit, etc.

El sitio en el que actualmente estoy trabajando esta programado en HTML5 y CSS3. Entré a ver como lo veía Firefox 4 y noté que todo se veía mal y movido.

Mis latidos se aceleraron y me pregunté ¿Por qué si hasta en IE se ve correctamente?

Investigando en google descubrí el problema de Firefox 4:
position:relative, position:aboslute.

Algunas personas ya tuvieron el mismo problema. No encontré una solución y preferí darme a la tarea de resolver mi problema por mi mismo.

Depurando con Firebug

Con la ayuda de Firebug, comencé a analizar los objetos de mi sitio y como era que Firefox los estaba renderizando. Me percaté que todos los objetos con position tenían un extraño margen que yo nunca declaré.

La solución: Declarar margenes para todos los objetos

Comencé a asignarle un margen en 0 a todos mis objetos con position, previamente no tenían ningún margen declarado ya que como están posicionados, utilizaba solo top, left, right y bottom.

Como mi sitio esta en HTML 5 lo único que hice para solucionar este problema fue agregar el siguiente código al principio de mi archivo CSS:

Código :

<style>
header, section, footer, aside, nav, article, figure, div{
    margin:0px; // <---- Margin en 0px
}
</style>

Para los que no usan HTML 5, la solución mas viable seria algo como:

Código :

<style>
div{
    margin:0px; // <---- Margin en 0px
}
</style>

Y listo, problema solucionado mi sitio se ve igual que siempre, en el resto de los navegadores.

Como no vi muchas respuestas a este problema aún en internet, decidí publicar mi solución en este foro gracias a su audiencia, seguro ayudara a algunos que migren a Firefox 4 y vean que su sitio entero se movió.

Saludos

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.