Jquery fancybox不处理带十进制值的宽度

我们注意到，当fancybox计算它需要多宽才能适应内容时，它不处理小数/浮点数

例如，如果我们分别有两个300px和217.367px，fancybox会将其内容的宽度四舍五入到300px+217px=517px。这意味着第二个div不适合，因此将下降到下一行

这似乎是由于使用了jquerywidth方法

相关代码

html:

jQuery：

请注意，在FIDLE中，内联容器始终可见，仅用于演示目的。还请注意，其中一个容器的宽度是在ems中设置的，这是一种非常常见的情况，因此在px中将其更改为固定宽度可能不是一种可行的方法，尽管可以在css上设置宽度：217.367px，并获得相同的结果

是否有修复或解决方法

一个可能且简单的解决方案是向fancybox容器添加一个额外的像素，但最好仅在需要时添加，而不是作为一般规则添加。

因为使用jQuery.width方法将始终返回元素宽度的舍入值，即使在parseFloat函数中：

看

。。。我们需要获得fancybox内容中每个元素的计算宽度，以获得fancybox容器的增量总宽度

为此，我们可以使用getPropertyValuewidth方法获得每个元素的计算宽度，如：

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

请注意，compWidth将返回字符串248.417px，因此我们仍然需要解析浮点值以获得正确的计算结果。我们可以这样做：

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

然后，我们可以比较总计算宽度是否有余数，以决定是否应该向fancybox容器添加额外的像素。我们可以通过使用模运算检查来实现这一点，例如：

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

看

注意：这是一种变通方法，可用于某些特定场景。另外请注意，getComputedStyle仅在IE9中受支持+

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

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

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

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