Question

有时我的父母div的背景正在显示，这让我发疯了。

设定：内部有4x4 div的Container-div（让我们称之为＆＃34;外部＆＃34 ;;蓝色bg）。每个蓝色＆＃34;外部＆＃34; -divs包含另一个div（＆＃34;内部＆＃34 ;;绿色bg）。

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

问题：即使我尝试了不同的方法（请参阅下面的codepen），有时蓝色bg会显示。

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

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

的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>  </div>

codepen-link

其他信息：如果我用firefox打开该codepen，它的行为与预期的一样，而不是在chrome或edge中。如果我用firefox打开我的visual studio代码，我得到相同的background-showing-display-glitch（？）（取决于zoomfactor）。

我尝试了浮动，弹性框和网格（参见codepen）;我使用像素高度/宽度，高度：100％，拉伸（flexbox）; pos：rel on outer和pos：abs，top，right，bottom，left：0 on inner; display：block不会有帮助，因为div已经是一个块元素了（只是为了确保我手动分配它）;我使用盒子大小：边框 - 而且我的想法已经用完了。是的，当我将边框分配给内部div时，外部bg不会显示;但它应该是边界的外部div，因为一旦绿色点击了边界，边界必须仍然在那里。

提前感谢任何建议！

Answer 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

Answer 2

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

我认为它可能是一个错误的原因是它不一致，因为你已经注意到了自己。在Chrome中，它的缩放级别为125％（在标准1080屏幕上）。在FireFox中，任何缩放级别都不会发生这种情况，Edge会在各种缩放级别上进行缩放。

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

根据缩放系数

2 个答案: