Question

I have a little piece of code that is rendering with fairly different vertical spacing in firefox, chrome, and ie9 on my win7 machine.

<div id="main-compo">
                <div id="divisions" class="transparent">
                    <p><a href="#">p1</a></p>
                    <p><a href="#">p2</a></p>
                    <p><a href="#">p3</a></p>
                    <p><a href="#">p4</a></p>
                    <p><a href="#">p5</a></p>
                    <p><a href="#">p6</a>
                    <p style="border-bottom: none;"><a href="#">p7</a></p>
                </div></div>

http://jsfiddle.net/erea/96KBC/

I’ve been working on it for over an hour and I still have no idea why. Any help would be great, thanks!

Answer 1

Found out line-height was the problem.

Added this and everything is prefect now.

body {
    line-height: 1;
}