Is it possible to achieve line-height consistency in all browsers?

Is it possible to achieve line-height consistency in all browsers?

I have attached an image. You will notice a red rectangular box and a green rectangular box (both of the same width and height) which I have added via photoshop manually to aid in showing the the space/gap difference between the dotted lines (below the red box) and the "Followers: 3197179" text.

It seems that Firefox is the only one that is displaying the elements differently. I notice this when I apply a line-height. Any way I can make this consistent with all browsers?

I am using Firefox 3.6.13, Safari 5.0.3, Opera 10.63 and Chrome 8.0.552.231.

.clearfix,
.container {
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  margin: 0 0 0 0;
  padding: 12px 0;
  border-bottom: 1px dotted #E7E7E7;
}

li img {
  float: left;
  margin-top: 0;
}

li p {
  margin: 0 0 0 58px;
  padding: 0;
  font-weight: normal;
  border: none;
  font-size: 1em;
  line-height: 1.3em;
}

li p.name {
  position: relative;
  padding-top: 0;
  font-size: 1.1em;
  font-weight: bold;
}

<ul>
  <li class="clearfix">
    <a href="#开发者_运维技巧"><img width="50" src="http://localhost:3000/images/foobar.gif" alt="thumb"></a>
    <p class="name">
      <a href="#">Jessica Simpson</a>
    </p>
    <p>Blurred out text here</p>
    <p>Followers: 3197179</p>
  </li>
</ul>

Your currently using em's. Maybe you can try to be more specific by trying to use px in both line-height and font-size. Also try to use padding in those texts, maybe it'll work, I think ;).

In any cross browser thing you do. There's is no concrete way of doing things to make it same on every renderer. It's always a dream that most client's don't understand. For me, it's better to always explain to them what they want and how much time we spend in things like 1px/2px differences. It's plain normal. You may check this video by Andy Clarke speaking about cross browser and some other cool stuff.

Are you using a CSS reset? These help alleviate most of the cross-browser issues. Meyer Web has a popular one: http://meyerweb.com/eric/tools/css/reset/

You can add line-height for Mozilla only, by using:

@-moz-document url-prefix() {
    *, body {
        line-height: [as per your requirement];
    }
}

Have you specified any common rules? e.g:

* {
    margin: 0;
    padding: 0;
}
body {
    font-size: 100%;
    line-height: 1;
}

Sometimes it's helpful, even without full reset.css approach.

It might be how the font is being rendered. Try using this as a font family.

font-family:"Arial Unicode MS","Lucida Sans Unicode";