Показывает родительский bg / child не заполняет 100% в зависимости от коэффициента масштабирования

Question

Иногда фон моего родительского div показывает, и это сводит меня с ума.

Настройка: контейнерный div с 4x4 div внутри (давайте назовем их "external"; синийвд).Каждый из синих «внешних» -дивов содержит еще один div («внутренний»; зеленый bg).

Почему я так хочу: зеленый должен покрывать синий, потому что в конечном итоге зеленый исчезнет (через jQuery - щелкните), и появится синий (у него будет bg-изображение вместо только синего bg).

Проблема: даже если я пробовал разные подходы (см. ниже код), иногда синий bg покажет.

снимок экрана проблемы

Дело в том, что иногда.Если браузер увеличен до удобного коэффициента масштабирования, он будет отображаться точно так, как задумано: зеленый покрывает синий на 100%.Однако, если браузер считает, что это неудобный коэффициент увеличения, синий bg просвечивает.Это также зависит от браузера.Если вы посмотрите приведенный ниже пример кода в Firefox, а не в Chrome, Opera или Edge, вы можете даже не увидеть эту ошибку (я не проверял ее в 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, он ведет себя так, как задумано, а не в chrome или edge.Если я открываю код Visual Studio в Firefox, я получаю тот же фон-показ-отображение-сбой (?) (В зависимости от коэффициента масштабирования).

Я пробовал float, flexbox и grid (см. Codepen);Я использовал высоту / ширину в пикселях, высоту: 100%, растянуть (flexbox);pos: rel на внешнем и pos: abs, верхний, правый, нижний, левый: 0 на внутреннем;display: block не поможет, потому что div уже является блок-элементом (просто чтобы убедиться, что я назначил его вручную в любом случае);Я использую box-sizing: border-box - и у меня заканчиваются идеи.Да, когда я назначаю границу внутренним элементам div, внешний bg не отображается;но это внешние div-ы, которые должны иметь границу, потому что как только зеленый щелчок щелкнет, граница должна все еще быть.

Заранее спасибо за любые предложения!

Answer 1

Я посмотрел на это, и это озадачивает.Мое лучшее предположение на данный момент заключается в том, что это ошибка браузера.С помощью HTML и CSS существует множество способов достижения одного и того же, поэтому ваш обходной путь не обязательно плох.Мне удалось заставить его вести себя, поместив границу на внутренние рамки вместо внешних.

Причина, по которой я думаю, что это может быть ошибкой, заключается в том, что она не согласована, как вы сами заметили.В Chrome это происходит при уровне масштабирования 125% (на стандартном экране 1080).В FireFox это не происходит вообще ни на одном уровне масштабирования, и Edge имеет его на различных уровнях масштабирования.

Это выглядит как внешний div на некоторых уровнях, расширяясь на половину пикселя шире, чем предполагалось, но в этом трудно быть уверенным.

Answer 2

Я нашел обходной путь для достижения своей цели к настоящему моменту (которая состояла в том, чтобы не дать синему проявиться), просто поместив еще один контейнер-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>

ссылка на кодовую ссылку