Question

我发现自己很努力地理解为什么我重新计算调整大小的元素的宽度并看到结果不起作用的方法。

场景：

我有一个灵活的布局，有3个不等宽的容器，分为页面宽度的3 / 7、1 / 7和3/7。我使用width: calc(100%/7)或width: calc(100%/7*3)来让浏览器计算这些容器的关系。

我知道一个问题，Chrome会将四舍五入后的计算值四舍五入，以防计算关系时不准确。在将浏览器窗口调整为亚像素宽的白色条纹时，这是可见的，背景在容器之间以特定宽度照亮。注意：此问题在Firefox中不会发生，它们似乎对这些值进行了不同的取整（？）。

我尝试过的事情：

我使用jQuery和parseFloat(document.getComputedStyle(element).width)来获取容器的值并计算差值，以便“拉伸”中间容器以填补空白：

jQuery(window).on('resize', function () {
    var mainSite = document.getElementsByClassName('site-main')[0];
    var leftStart = document.getElementsByClassName('page-trigger left')[0];
    var middleStart = document.getElementsByClassName('page-trigger middle')[0];
    var rightStart = document.getElementsByClassName('page-trigger right')[0];

    var mainSiteWidth = parseFloat(window.getComputedStyle(mainSite).width);
    var leftStartWidth = parseFloat(window.getComputedStyle(leftStart).width);
    var middleStartWidth = parseFloat(window.getComputedStyle(middleStart).width);
    var rightStartWidth = parseFloat(window.getComputedStyle(rightStart).width);

    console.log(mainSiteWidth);
    console.log(leftStartWidth);
    console.log(middleStartWidth);
    console.log(rightStartWidth);

    var calculatedElementWidth = leftStartWidth + middleStartWidth + rightStartWidth

    if (mainSiteWidth > calculatedElementWidth){
        var diff = mainSiteWidth - calculatedElementWidth;
        var newMiddleWidth = middleStartWidth + diff;
        console.log("diff: " + diff);
        console.log("new middle width: " + newMiddleWidth);

        jQuery(middleStart).css({
            flex : "0 0 " + newMiddleWidth + "px",
            width: newMiddleWidth + "px",
            minWidth: newMiddleWidth + "px",
            maxWidth: newMiddleWidth + "px"
        });

        console.log(parseFloat(window.getComputedStyle(middleStart).width));

    }
}).resize();

到目前为止，至少在DOM检查器中，正确地计算了值，甚至将其应用于middleStart元素，但是，即使css值指示了差距，它也应该已经改变了。

这些是修改jquery之前的css设置：

flex: 0 0 calc(100%/7); --> translates to 273.562px, Chrome shows as 273.56px
width: calc(100%/7); --> translates to 273.562px, Chrome shows as 273.56px
min-width: calc(100%/7); --> translates to 273.562px, Chrome shows as 273.56px
max-width: calc(100%/7); --> translates to 273.562px, Chrome shows as 273.56px

以下是DOM检查器中的值：

flex: 0 0 273.594px;
width: 273.594px;
min-width: 273.594px;
max-width: 273.594px;

我试图创建一个jsfiddle，但由于那里的布局更加复杂并且具有更多的层，因此无法在此处重现该问题。

有人知道，为什么css设置虽然应用于DOM中的元素，却不可见？

编辑：会发生这种情况，请尝试水平调整浏览器窗口的大小（请忽略偶然的right元素的跳转，我不得不使用float：left;使其可重现，并且仅在Chrome中发生：{{3 }}

jsfiddle

jQuery CSS已应用，但对于flex元素不可见

0 个答案: