fancybox не обрабатывает ширины с десятичными значениями

Question

Было замечено, что, когда fancybox вычисляет, насколько широким он должен соответствовать содержимому, он не обрабатывает десятичные числа/числа с плавающей запятой.

Например, если у нас было 2 <div> из 300px и 217.367px соответственно FancyBox бы округлить width его содержания в 300px + 217px = 517px. Это означает, что второй div не подходит и поэтому опустится до следующей строки.

Возможно, это связано с использованием метода jQuery width().

Соответствующий код

HTML:

<a class="fancybox" href="#inline">open inline</a> 

<div id="inline" class="cf"> 
    <div id="content"> 
     <h3>Lorem Ipsum</h3> 
     <p>More text content etc</p> 
    </div> 
    <div id="red">Other floating content</div> 
</div> 

CSS:

#inline { 
    position: relative; 
    white-space: nowrap; 
} 
#content { 
    width: 15.526em; /* 217.367px */ 
    height: 150px; 
    display: block; 
    float: left; 
} 
#red { 
    height: 150px; 
    width: 300px; 
    display: block; 
    float: left; 
} 

JQuery:

$(".fancybox").fancybox({ 
    padding: 0 
}); 

JSFIDDLE

Примечание в скрипку #inline контейнер всегда виден только для демонстрационных целей. Также обратите внимание на width одного из контейнеров был установлен в ems, который является довольно распространенным сценарием поэтому изменение его в px фиксированной width не может быть путь (хотя это можно установить width: 217.367px на CSS с такой же результат)

Есть ли исправление или обходной путь?

Возможным и простым решением было бы добавить дополнительный пиксель в контейнер fancybox, но было бы лучше добавить его только тогда, когда это необходимо, а не как общее правило.

Answer 1

С помощью метода JQuery .width() всегда возвращает округленное значение элемента width, даже в пределах parseFloat()функции:

parseFloat($("#element").width()); 

см jsfiddle

... мы должны были бы для получения вычисленоwidth каждого элемента в пределах содержимого fancybox, чтобы получить инкрементную сумму width контейнера fancybox.

Чтобы сделать это, мы можем использовать getComputedStyle() наряду с методом getPropertyValue("width") получить вычисленногоwidth каждого элемента, как:

var compWidth = window.getComputedStyle(element).getPropertyValue("width"); 

Уведомление что compWidth возвратит строку 248.417px так что мы по-прежнему нужно для анализа значения плавающего значения, чтобы получить правильный расчет. Мы могли бы сделать что-то вроде:

parseFloat(compWidth.split("px")[0]); 

Затем мы можем сравнить, если общая вычисленwidth имеет остаток решить, следует ли добавить дополнительный пиксель в контейнер FancyBox или нет. Мы можем добиться этого с помощью по модулю операции (Проверьте this answer для справки), как:

if (totalWidth % 1 != 0) { 
    totalWidth++; // or Math.ceil(totalWidth); 
} 

Смотрите полный код с расчетами в afterLoad обратного вызова:

jQuery(document).ready(function ($) { 
    $(".fancybox").fancybox({ 
     padding: 0, 
     afterLoad: function() { 
      // get the computed width of elements inside fancybox 
      var totalWidth = 0; 
      $("#inline").find("div").each(function (i) { 
       // increment total width with each element's width 
       totalWidth += parseFloat(
       window.getComputedStyle(this) 
         .getPropertyValue("width") 
         .split("px")[0]); 
      }); 
      // compare if the result has a remainder 
      if (totalWidth % 1 != 0) { 
       // increase total width by 1px 
       totalWidth++; // or Math.ceil(totalWidth); 
       // set the new fancybox width 
       $.extend(this, { 
        fitToView: false, // cause will set a fixed width 
        autoWidth: false, 
        width: totalWidth 
       }); 
      } 
     } 
    }); 
}); // ready 

См JSFIDDLE

ПРИМЕЧАНИЕ: это обходное решение, которое может быть полезно для некоторых конкретных сценариев. Также обратите внимание, что getComputedStyle() поддерживается только в IE9 +