Is it possible to achieve string consistency in all browsers?

Question

Is it possible to achieve string consistency in all browsers?

I attached the image. You will see a red rectangular box and a green rectangular rectangle (both with the same width and height), which I added with Photoshop to help show the space / gap difference between the dashed lines (under the red box) and the text "Followers: 3197179".

It seems that Firefox is the only one that displays elements in different ways. I notice this when I apply row height. Anyway, can I make it compatible with all browsers?

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

CSS

.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; } 

HTML

 <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> 

Answer 1

You are currently using em. Perhaps you can try to be more specific by trying to use px both in a string and in font size. Also try using the propiska in these texts, maybe it will work, I think;).

In any cross-browser thing you do. There is no concrete way to do things to make them the same on every renderer. It is always a dream that most customers do not understand. It’s better for me to always tell them what they want and how much time we spend in things like the 1px / 2px differences. This is normal. You can check out this video from Andy Clark talking about cross browser and some other interesting stuff .

Answer 2

Are you using CSS reset? They help alleviate most cross-browser issues. Meyer Web is popular: http://meyerweb.com/eric/tools/css/reset/

Answer 3

Have you specified any general rules? eg:

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

This is sometimes useful, even without a complete reset.css approach.

Answer 4

You can add line-height only for Mozilla using:

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

Answer 5

Perhaps this will display the font. Try using this as a font family.

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