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中设置，这是一种非常常见的情况，因此将其更改为width中的固定px可能不是这种方式去（尽管可以在 css 上设置width: 217.367px并获得相同的结果）

是否有修复或解决方法？

一个可行且简单的解决方案是在fancybox容器中添加一个额外的像素，但最好只在需要时添加它而不是一般规则。

Answer 1

由于使用jQuery .width()方法将始终返回元素width的舍入值，即使在parseFloat() 函数中也是如此： / p>

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

参见 jsfiddle

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

为此，我们可以使用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

注意：这是一种对某些特定方案有用的解决方法。另请注意，仅在IE9 +

中支持getComputedStyle()

fancybox不处理带小数值的宽度

1 个答案: