Всем привет! Столкнулся с довольно странной вещью.
Есть примерно такой код 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, это может как-то повлиять?
Помогите, кто чем может, пожалуйста)
