[Nilagor]

Всем привет! Столкнулся с довольно странной вещью.
Есть примерно такой код html:

<ul id="cats">
	<li>
		<a href="#" class="one-cat-img"><img src="content/site/images/fake/cats/1.png" alt="@item.Link"></a>
		<a href="#" class="one-cat-title">Заголовок</a>
		<ul class="one-cat-menu">
			<li><a href="#">Пункт 1</a></li>
		</ul>
	</li>
	<li>
		<a href="#" class="one-cat-img"><img src="content/site/images/fake/cats/2.png" alt="@item.Link"></a>
		<a href="#" class="one-cat-title">Заголовок подлиннее</a>
		<ul class="one-cat-menu">
			<li><a href="#">Пункт 1</a></li>
			<li><a href="#">Пункт 2</a></li>
			<li><a href="#">Пункт 3</a></li>
		</ul>
	</li>
</ul>

ul#cats li имеют display: inline-block. Картинка, заголовок и подменю расположены в столбец друг за другом. Заголовок должен быть одной строкой и под его ширину должен подстроится весь li. Отчаялся сделать это средствами css и решил сделать простенький скриптик:

if ($('#cats > li').length > 0) {
	$('#cats > li').each(function () {
		var wid = $(this).find('.one-cat-title').outerWidth(true);
		console.log(wid);
		$(this).width(wid);
	});
}

И вот здесь возникла проблема - то что выводится в консоль не соответствует реальности и у каждого заголовка своя погрешность.
При этом если в консоли написать что-то типа:

$('#cats .one-cat-title').outerWidth()

То значение выводится верное. В чём косяк?
Да, на заголовке висит левый шрифт, подключённый через font-face, это может как-то повлиять?
Помогите, кто чем может, пожалуйста)