Posicionar y redimensionar div respecto a otro

[isirivm]

Buenas noches a todos:
Tengo un problema que me trae loco, tengo un menú (lista de <li>) en horizontal como menú, con dentro de cada <li> el enlace correspondiente y tengo una barra abajo que hago que se mueva con jQuery, animando sus propiedades CSS para que segun hago hover en cada uno de los enlaces, se posiciones justo debajo de cada enlace, redimensionandose para que coincida con el tamaño de la palabra del enlace.
El problema me viene que el div que voy posicionando lo hago a base de variarle la propiedad left para situarlo a ojo justo al comienzo de la palabra y la propiedad with para redimensionarlo a ojo al tamaño de la palabra también, esto funciona correctamente en chrome, firefox e IE, pero en safari y en dispositivos móviles, varía el espacio entre letras de las palabras, que debe variar poquísimo, pero hace que se descuadre todo y el div que se desplaza ya no queda alineado ni al tamaño adecuado. He probado con el tipo de fuente Arial y Arial Narrow y nada, siempre varía, no son exactamente igual según el explorador. Existe alguna manera de saber el tamaño del <li> que contiene cada enlace (cada palabra) o calcular el tamaña exacto de las palabras o alguien que pudiera decirme como poder solucionarlo???
Por favor agradecería alguien me pudiera decir si es posible conseguir lo que quiero hacer para que funcione en todos los dispositivos o debo desistir y diseñarlo de otra manera.

Gracias , un saludo.