父背景显示/子不填充 100%，具体取决于缩放因子答案

【问题标题】：Parent bg shows/ child doesn't fill 100% depending on zoom factor父背景显示/子不填充 100%，具体取决于缩放因子
【发布时间】：2018-11-05 13:24:43
【问题描述】：

有时我的 parent-div 的背景会显示出来，这让我发疯。

设置：里面有 4x4 div 的 Container-div（我们称它们为“外部”；蓝色背景）。每个蓝色“外部”-div 都包含另一个 div（“内部”；绿色 bg）。

我为什么要这样：绿色应该覆盖蓝色，因为最终绿色会消失（通过 jQuery - 单击）并且蓝色会显示（它将有一个 bg-image 而不仅仅是蓝色 bg）。

问题：尽管我尝试了不同的方法（参见下面的 codepen），有时蓝色背景会显示出来。

screenshot of the problem

重点是-有时-。如果浏览器缩放到方便的缩放因子，它将完全按照预期显示：绿色覆盖蓝色 100%。然而，如果浏览器认为这是一个不方便的缩放因子，蓝色的 bg 就会显示出来。它也因浏览器而异。如果您在 firefox 而不是 chrome、opera 或 edge 中查看下面的 codepen-example，您甚至可能看不到该错误（我没有在 safari 中对其进行测试）。

问题：无论缩放系数（或浏览器）如何，如何确保绿色始终覆盖蓝色？

css:

<style>
    #outer-container {
        width: 600px;
        /* height: 600px; */
        display: flex;
        flex-flow: row wrap;
    }

    .outer-box {
        width: 150px;
        height: 150px;
        background-color: blue;
        border: 1px solid black;
        box-sizing: border-box;
    }

    .inner-box {
        width: 100%;
        height: 100%;
        background-color: green;
    }
</style>

html:

<div id="outer-container">
    <div class="outer-box" id="outer-box01">
        <div class="inner-box"></div>
    </div>
    <div class="outer-box" id="outer-box02">
        <div class="inner-box"></div>
    </div>
    <div class="outer-box" id="outer-box03">
        <div class="inner-box"></div>
    </div>
    <!-- there are 16 outer-divs in total (see codepen) -->
</div>

codepen-link

附加信息：如果我用 Firefox 打开那个 codepen，它会按预期运行，而不是在 chrome 或 edge 中。如果我用 Firefox 打开我的 Visual Studio 代码，我会得到相同的 background-showing-display-glitch(?)（取决于缩放因子）。

我尝试了浮点数、flexbox 和网格（参见 codepen）；我使用了像素的高度/宽度，高度：100%，拉伸（flexbox）； pos: rel 在外部和 pos: abs, top,right,bottom,left: 0 在内部； display: block 无济于事，因为 div 已经是块元素（只是为了确保我还是手动分配了它）；我使用 box-sizing:border-box - 我的想法已经不多了。是的，当我将边框分配给内部 div 时，外部 bg 不显示；但应该是外部 div 有边框，因为一旦绿色 get 被点击，边框必须仍然存在。

提前感谢您的任何建议！

【问题讨论】：

标签： html css

【解决方案1】：

我找到了一种解决方法来实现我现在的目标（即不让蓝色显示出来），只需将另一个 container-div 放在第一个之上。 我最初的问题，但是，仍然没有答案与该解决方案。但以防万一有人尝试类似的东西：

html:

<div id="outer-container">
    <div id="inner-container">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    <!-- 16 of those inner-divs here -->
    </div>
    <div class="bg"></div>
    <div class="bg"></div>
    <div class="bg"></div>
    <!-- 16 of those bg-divs here -->
</div>

css:

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    #outer-container {
        width: 600px;
        position: relative;
        overflow: hidden;
    }

    #inner-container{
        /* width: 600px; */
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
    }

    .bg, .inner{
        width: 150px;
        height: 150px;
        border: 1px solid black;
        float: left;
    }

    .bg{
        background-color: blue;
    }

    .inner{
        background-color: green;
    }
</style>

codepen link

【讨论】：

【解决方案2】：

我看过这个，这很令人费解。在这一点上我最好的猜测是它是一个浏览器怪癖/错误。使用 HTML 和 CSS 有很多方法可以实现相同的目标，因此您的解决方法不一定是坏事。我设法通过将边框放在内盒而不是外盒上来使其正常运行。

我认为这可能是一个错误的原因是它不一致，正如您自己注意到的那样。在 Chrome 中，它发生在 125% 的缩放级别（在标准 1080 屏幕上）。在 FireFox 中，它根本不会发生在任何缩放级别上，而 Edge 在各种缩放级别上都有它。

看起来有点像某些级别的外部 div 最终会比预期的宽度扩展半个像素，但很难确定。

【讨论】：