При загрузке страницы Bootstrap navbar заполняется метками до тех пор, пока они не поместятся в нем.Я делаю это, используя свойство width через $('label').css('width'), и оно отлично работает в FF, но когда я тестирую его в Chrome, метки переполняют navbar и область просмотра.
Отладка кода, который я заметилзначение, возвращаемое $('label').css('width') в Chrome, далеко не совпадает с указанным на вкладке инспектора браузера в разделе Вычислено :
и console.log(parseFloat($('label').css('width'))) выходы: 64,725
С другой стороны, в FF:
и console.log(parseFloat($('label').css('width'))) выходы:82,4, что прямо на реплике.
HTML
<label class="btn btn-light" data-original-title="" title="">
<a class="btn" href="http://localhost">
<img src="images/amazon.png"> TEXT
</a>
</label>
У меня вопрос, как получить фактическую ширину метки в Chrome?
Спасибо
ОБНОВЛЕНИЕ
Попробовал все эти
$('label')[0].clientWidth; //63
$('label').get(0).offsetWidth; //65
document.defaultView.getComputedStyle($('label')[0])['width']; //64.725px
$('label').css('width'); //64.725px
ни один из них даже вблизи вычисленной ширины в изображении
Временное (надеюсь) решение:
Это было изображение внутри этикетки
Это было особенно странно и трудно найти, потому что, помните, это сработалов браузере, а не в другом.
Как это бывает, я запрашивал ширину метки до того, как в нее было загружено изображение, что приводило к неверному результату.
Я использовал $(window).ready(), виновен как заряженный, но не $(window).on("load", () => {}), ни window.onload = () => {}, ни window.addEventListener('load', () => {}) не заставили его работать, хотя одно из ключевых отличий между первым и остальным состоит в том, что $(window).ready() выполняет как только DOM манипулирует и не ждет загрузки изображений, а остальные ждут таких изображений, хотя Chrome решил, что это не является приоритетом прямо сейчас.
Угадайте, кто решил проблему: этот пост .
Довольно хак, но, действительно, setTimeout(() => {}, 0) был героем на этот раз, и да, с таймаутом 0, тем не менее.Теперь код фактически ожидает загрузки изображений.
Примечание: я также переключился на window.onload = () => {}, на всякий случай.
Надеюсь, это сэкономит чужое время.