I.E./Firefox Text Positioning Issue

I've encountered this issue a few times, but it's very subtle so I've worked around it in the past. However, its a bit more noticeable in the code I'm working with at the moment.

Basically, there's a difference of 1 pixel in the y positioning of generic text between I.E. and Firefox. Here's a simple example:

CSS:

.Box
{
	position: relative;
	height: 13px;
	margin: 0px;
	padding: 0px;
	line-height: 13px;
	background-color: #2d2d2d;
}

.Text
{
	font-family: verdana; 
	font-weight: none;
	font-size: 10px; 
	color: #ffffff; 
	line-height: 13px; 
	height: 13px;
	background-color: #e85d91;
}

Code (markup):

HTML:

<span class="Box"><span class="Text">HOME</span></span>

Code (markup):

This example is just a word of text with a pink background in a box with a dark background. If you view this code in Firefox the text is 1 pixel higher than the same code viewed in I.E.

Hopefully this is quite a common, simple problem with a quick fix that I've missed.

Any ideas?

Cheers
Kyle

 

you should be able to fix it by removing the line-heights but im not sure if thats a great solution.

im assuming it just another rendering bug the IE has though.

 

Yup, removing the line-heights does work, thanks mate.

Although now of course the text container is 1 pixel taller in I.E.

Will put this one down to another I.E. bug.